NVD3 - Wie aktualisiert man die Datenfunktion, um neue Daten bei Klick

Question

zu erstellen Ich habe ein Liniendiagramm und jedes Mal aktualisiert die Seite die Daten, die groß ist, aber ich muss durch einen Klick auf den Benutzer aktualisieren. Dies liegt daran, dass auf der Seite eventuell andere Eingabefelder vorhanden sind und das Aktualisieren der Seite ihre aktuelle Sitzung zerstören würde.

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

Hier ist der Code-Setup die Zeile zu erstellen:

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

Hier ist, was ich versucht für die Aktualisierung zu schreiben, aber fehlgeschlagen:

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

Hier ist, was Ich habe es anders mit deinem Code gemacht.

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

Hier ist, wie die update() Funktion wie folgt aussieht:

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

Hier ein Link zu einem working version des Codes ist.

Ich hoffe, es hilft.