NVD3 - Jak odświeżyć funkcję danych do nowych danych produktu kliknij

Question

Mam wykres liniowy i za każdym razem odświeżenie strony zmienia dane, co jest wspaniałe, ale muszę odświeżyć przez kliknięcie użytkownika. Dzieje się tak dlatego, że w końcu będą inne pola wejściowe na stronie, a odświeżenie strony zniszczy ich bieżącą sesję.

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

Oto konfiguracja kod, aby utworzyć linię:

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

Oto, co starałem się pisać, ale nie do aktualizacji:

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

Oto co Zrobiłem inaczej z twoim kodem.

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

Oto jak wygląda funkcja 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); 

Oto link do working version swojego kodu.

Mam nadzieję, że to pomaga.