d3.js - 在 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);