在 d3.js 或 nvd3.js 折线图中选择一条线

Question

在 D3 或 NVD3.js 折线图中，如何在图形呈现后选择特定的折线？例如，假设我想为线条上的笔画宽度设置动画，如下所示：

d3.selectAll('path').transition().duration(2000).style("stroke-width", "20");

显然，上面将选择所有路径，但我想选择一个特定的系列——例如，像这样定义的数据集中的Oranges系列：

var data = [{key: "Apples", values: array1},{key: "Oranges", values: array2}]

我认为这可能会起作用，但它没有：

d3.select('#chart svg').datum(data[1]).transition... // or alternatively,
d3.select('#chart svg').datum(data[1].values).transition...

我一直在尝试使用代码编辑器中的累积折线图示例来解决这个问题，但没有成功：http://nvd3.org/livecode/#codemirrorNav

这是一个非常基本的问题，但我是 D3 的新手，一直无法弄清楚。

Answer 1

我能想到几种简单的方法：

1. 您可以将每个路径存储在其自己的变量中（或在数组中）：

   var path1 = graph.append("g").append("path").data([data1]).attr("class", "line1");

   现在您可以将转换应用到这个路径变量，它应该可以工作了。

2. 另一个选项是给每个路径一个唯一的类，然后使用 d3.selectAll(".uniqueclassname") 并应用你的转换。

在这个fiddle中，看tick函数（专门针对下面这段代码）。

// redraw the lines
        graph.select(".line1").attr("d", line).attr("transform", null);
        path2.attr("d", line).attr("transform", null);
        path3.attr("d", line).attr("transform", null);
        graph.select(".line4").attr("d", line).attr("transform", null);