NVD3 - 如何刷新數據功能以產生新的點擊數據

Question

我有一個折線圖，每次頁面刷新都會改變數據，這很好，但我需要通過用戶單擊進行刷新。這是因爲頁面上最終會有其他輸入字段，刷新頁面會破壞當前會話。

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

下面是代碼的設置來創建行：

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

這裏是我試着寫，但更新失敗：

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

這裏是什麼我對你的代碼做了不同的處理。

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

這裏是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); 

這裏是你的代碼的working version的鏈接。

希望它有幫助。