NVD3 - Cách làm mới chức năng dữ liệu để tạo dữ liệu mới khi nhấp vào

Question

Tôi có biểu đồ đường và mỗi lần làm mới trang sẽ thay đổi dữ liệu, điều này thật tuyệt vời nhưng tôi cần phải làm mới bằng nhấp chuột của người dùng. Điều này là do cuối cùng sẽ có các trường nhập khác trên trang và làm mới trang sẽ phá hủy phiên hiện tại của chúng.

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

Đây là thiết lập mã để tạo dòng:

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

Dưới đây là những gì tôi đã cố gắng để viết nhưng không cho cập nhật:

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

Đây là những gì Tôi đã làm khác với mã của bạn.

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

Đây là cách update() chức năng trông giống như:

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

Đây là một liên kết đến một working version mã của bạn.

Hy vọng điều đó sẽ hữu ích.