d3.js - nvd3.js : no mouseover datapoint effects in a line chart on updating the chart -
i'm trying draw simple line chart using nvd3/d3. things fine when graph loads first time. whenever load new data , update graph, transition occurs on datapoints during 'mouseover' lost. tooltip shown though. how fix this?.
have @ jsfiddle demo.
adding code :
//js : var n = 0; var data = function (start) { var line1 = [], line2 = []; (var = start; < start + 50; i++) { line1.push({ x: i, y: 2 * }); line2.push({ x: i, y: 3 * }); } 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)); }); the html page :
<div id="chart"> <svg></svg> </div> <button>change graph</button>
the code need simpler have. need create chart object once , don't need call nv.addgraph() either. i've updated jsfiddle here; relevant code below.
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); }); all actual drawing work done in line .call(chart).
Comments
Post a Comment