1

在 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 的新手，一直无法弄清楚。

4

1 回答 1

2

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

  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);
于 2013-09-18T02:03:50.320 回答