javascript - multibarchart - NVD3-Cómo actualizar la función de datos para generar nuevos datos al hacer clic

nvd3 multibarchart

Question

Tengo un gráfico de líneas y cada vez que la página se actualiza, cambia los datos, lo cual es genial, pero necesito actualizar con un clic del usuario. Esto se debe a que eventualmente habrá otros campos de entrada en la página y al actualizar la página se destruirá su sesión actual.

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

Aquí está la configuración del código para crear la línea:

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

Esto es lo que intenté escribir pero no pude actualizar:

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

Esto es lo que hice de manera diferente con su código.

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

Así es como se ve la función update() :

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

Aquí hay un enlace a una versión de trabajo de su código.

Espero eso ayude.