0

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

1 に答える 1