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

Popular posts from this blog

node.js - Bad Request - node js ajax post -

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -