NVD3 – How to refresh the data function to product new data on click

by

Here is what I did differently with your code.

// Maintian an instance of the chart 
var chart; 

// Maintain an Instance of the SVG selection with its data
var chartData;

nv.addGraph(function() {
    chart = nv.models.lineChart().margin({
        top : 5,
        right : 10,
        bottom : 38,
        left : 10
    }).color(["lightgrey", "rgba(242,94,34,0.58)"])
        .useInteractiveGuideline(false)
        .transitionDuration(350)
        .showLegend(true).showYAxis(false)
        .showXAxis(true).forceY([0.4, 1.6]);

    chart.xAxis.tickFormat(d3.format('d')).axisLabel("Rounds");
    chart.yAxis.tickFormat(d3.format('0.1f'));

    var data = economyData();

    // Assign the SVG selction
    chartData = d3.select('#economyChart svg').datum(data);
    chartData.transition().duration(500).call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
});

Here’s how the update() function looks like:

function update() {
    var data = economyData();

    // Update the SVG with the new data and call chart
    chartData.datum(data).transition().duration(500).call(chart);
    nv.utils.windowResize(chart.update);
};

// Update the CHART
d3.select("#update").on("click", update);

Here is a link to a working version of your code.

Hope it helps.

More Related Contents:

  1. nvd3 piechart.js – How to edit the tooltip?
  2. Unable to get node datum on mouseover in D3 v6
  3. What’s the best way to make a d3.js visualisation layout responsive?
  4. How can I bring a circle to the front with d3?
  5. Updating SVG Element Z-Index With D3
  6. D3 Appending Text to a SVG Rectangle
  7. How do you create a family tree in d3.js?
  8. D3 force layout – linking nodes by name instead of index
  9. Is there a way to tell crossfilter to treat elements of array as separate records instead of treating whole array as single key?
  10. D3js – change Vertical bar chart to Horizontal bar chart
  11. In d3, how to get the interpolated line data from a SVG line?
  12. Creating and appending detached elements with d3.create
  13. Label outside arc (Pie chart) d3.js
  14. D3js take data from an array instead of a file
  15. Where is d3.svg.diagonal()?
  16. d3.js – v3 and v4 – Enter and Update differences
  17. Importing data from multiple csv files in D3
  18. D3.js – Donut charts with multiple rings
  19. D3 fill shape with image using pattern
  20. Setting rounded corners for svg:image
  21. d3 force directed layout – link distance priority
  22. Convert a directory structure in the filesystem to JSON with Node.js
  23. How do I save/export an SVG file after creating an SVG with D3.js (IE, safari and chrome)?
  24. svg / d3.js rounded corners on one side of a rectangle
  25. Adding new nodes to Force-directed layout
  26. Display an arrow head in the middle of D3 force layout link
  27. How to register multiple external listeners to the same selection in d3?
  28. Can’t make paths draw growing slowly with D3
  29. d3 sankey charts – manually position node along x axis
  30. clicking a node in d3 from a button outside the svg

Leave a Comment