javascript - Multiple Line Transitions - from x lines to y lines in D3.js -
i'm trying have multiple line graph transition set of x number of lines set of y number of lines. after going through many examples (both here @ stackoverflow , wider web) still stumped. please me i'm sure easy fix.
relevant code:
//--line generators var line_main = d3.svg.line() .defined(function (d) { return d.value != isnan(d.value); }) //--deals nan results in y range extending 0 .x(function (d) { return x_main(d.date); }) .y(function (d) { return y_main(d.value); }); var svg = d3.select('#discharge-graph').append('svg') .attr('class', 'graph') .attr('width', w + margin.left + margin.right) .attr('height', h + margin.top + margin.bottom); var main = svg.append('g') .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); update(); function update() { //--reset plot elements d3.selectall("path.line").remove(); //--trying use transitions instead of //--paths main areas main.selectall('path.line') .data(sets) .enter() .append('path') .attr('d', function (d) { return line_main(d.values); }) .attr('class', 'line') .style('stroke', function (d) { return colour(d.name); }); };
i have tried many variations comment out line:
d3.selectall("path.line").remove();
and add 1 or more of lines of code commented out below:
//--paths main areas main.selectall('path.line') //d3.transition(main).select('path.line') //.transition().duration(600) .data(sets) //.transition().duration(600) .enter() .append('path') .attr('d', function (d) { return line_main(d.values); }) .attr('class', 'line') .style('stroke', function (d) { return colour(d.name); });
the result blank canvas. complete code stands @ jsfiddle. insight appreciated.
Comments
Post a Comment