Tuesday, 17 September 2013

Select a line in a d3.js or nvd3.js line graph

Select a line in a d3.js or nvd3.js line graph

In a D3 or NVD3.js line graph, how can I select a particular line once the
graph is rendered? For example, suppose I want to animate the stroke width
on a line, like this:
d3.selectAll('path').transition().duration(2000).style("stroke-width", "20");
The above will select all paths, obviously, but I would like to select a
particular series—for example, the Oranges series in a data set defined
like this:
var data = [{key: "Apples", values: array1},{key: "Oranges", values: array2}]
I thought something this might work, but it did not:
d3.select('#chart svg').datum(data[1]).transition... // or alternatively,
d3.select('#chart svg').datum(data[1].values).transition...
I've been trying to figure it out using the Cumulative Line Chart example
in the code editor here, with no success:
http://nvd3.org/livecode/#codemirrorNav
This is a very basic question, but I'm new to D3 and have been unable to
figure it out.

No comments:

Post a Comment