0

我正在尝试使用 nvd3/d3 绘制一个简单的折线图。第一次加载图表时一切正常。但是，每当我加载新数据并更新图表时，在“鼠标悬停”期间发生在数据点上的转换都会丢失。虽然显示了工具提示。如何解决这个问题？

看看这个jsFiddle 演示。

添加代码：

//js :

    var n = 0;

var data = function (start) {
    var line1 = [],
        line2 = [];

    for (var i = start; i < start + 50; i++) {
        line1.push({
            x: i,
            y: 2 * i
        });
        line2.push({
            x: i,
            y: 3 * i
        });
    }

    return [{
        values: line1,
        key: 'y = 2 * x',
        color: '#ff7f0e'
    }, {
        values: line2,
        key: 'y = 3 * x',
        color: '#2ca02c'
    }];
}

var drawGraph = function (start) {
    var chart = nv.models.lineChart();

    chart.xAxis.axisLabel('Time (ms)')
        .tickFormat(d3.format(',r'));

    chart.yAxis.axisLabel('Voltage (v)')
        .tickFormat(d3.format('.02f'));

    d3.select('#chart svg')
        .datum(data(start))
        .transition().duration(500)
        .call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
}

nv.addGraph(drawGraph(n));

$("button").click(function () {
    n += 50;
    nv.addGraph(drawGraph(n));
});

html页面：

<div id="chart">
<svg></svg>
</div>
<button>Change Graph</button>
4

1 回答 1

0

您需要的代码实际上比您拥有的要简单得多。您只需要创建一次图表对象，也不需要调用nv.addGraph()。我在这里更新了 jsfiddle ；相关代码也在下面。

var chart = nv.models.lineChart();

chart.xAxis
  .axisLabel('Time (ms)')
  .tickFormat(d3.format(',r'));

chart.yAxis
  .axisLabel('Voltage (v)')
  .tickFormat(d3.format('.02f'));

var drawGraph=function(start) {
  d3.select('#chart svg')
    .datum(data(start))
    .transition().duration(500)
    .call(chart);

  nv.utils.windowResize(chart.update);
}

drawGraph(n);

$("button").click(function(){
  n += 50;
  drawGraph(n);
});

所有实际的绘图工作都是在生产线上完成的.call(chart)。

于 2013-04-19T08:52:06.417 回答