Question

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

添加代码：

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

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

nvd3.js：更新图表时折线图中没有鼠标悬停数据点效果

1 个答案: