nvd3.js：更新图表时折线图中没有鼠标悬停数据点影响答案

【问题标题】：nvd3.js : no mouseover datapoint effects in a line chart on updating the chartnvd3.js：更新图表时折线图中没有鼠标悬停数据点影响
【发布时间】：2013-04-19 08:34:15
【问题描述】：

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

看看这个jsFiddle demo。

添加代码：

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

【问题讨论】：

标签： d3.js linechart nvd3.js

【解决方案1】：

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

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)这一行中完成。

【讨论】：