NVD3 - How to update data function to output new data on click

Question

I have a line chart, and every time a page refresh changes the data, it's great, but I need to refresh a user click. This is due to the fact that there will be other input fields on this page, and updating the page will destroy their current session.

jsfiddle - http://jsfiddle.net/darcyvoutt/dXtv2/

Here is the code setup for creating a string:

function economyData() { // Rounds var numRounds = 10; // Stability of economy var stable = 0.2; var unstable = 0.6; var stability = unstable; // Type of economy var boom = 0.02; var flat = 0; var poor = -0.02; var economyTrend = boom; // Range var start = 1; var max = start + stability; var min = start - stability; // Arrays var baseLine = []; var economy = []; // Loop for (var i = 0; i < numRounds + 1; i++) { baseLine.push({x: i, y: 1}); if (i == 0) { economyValue = 1; } else { var curve = Math.min(Math.max( start + ((Math.random() - 0.5) * stability), min), max); economyValue = Math.round( ((1 + (economyTrend * i)) * curve) * 100) / 100; } economy.push({x: i, y: economyValue}); } return [ { key: 'Base Line', values: baseLine }, { key: 'Economy', values: economy } ]; } 

Here is what I tried to write but failed to update:

 function update() { sel = svg.selectAll(".nv-line") .datum(data); sel .exit() .remove(); sel .enter() .append('path') .attr('class','.nv-line'); sel .transition().duration(1000); }; d3.select("#update").on("click", data); 

Answer 1

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; }); 

This is what 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 the working version of your code.

Hope this helps.