NVD3 -如何刷新数据功能，以产生新的数据点击

NVD3 - How to refresh the data function to product new data on click

本文关键字：数据 功能 何刷新 刷新 NVD3      更新时间：2023-09-26

我有一个折线图，每次页面刷新它都会改变数据，这很好，但我需要通过用户点击来刷新。这是因为页面上最终会有其他输入字段，刷新页面会破坏当前会话。

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

我对你的代码做了不同的处理。

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

这是你的代码的工作版本的链接。

希望能有所帮助。

相关文章：