将 class 应用于 CSV 文件中的特定数据

Question

所以我正在尝试将项目中的线条颜色编码到我的数据集中。这是一个示例：

Sepal Length,Sepal Width,Petal Length,Petal Width,Species
5.1,3.5,1.4,0.2,Iris-setosa
4.9,3.0,1.4,0.2,Iris-setosa
4.7,3.2,1.3,0.2,Iris-setosa
4.6,3.1,1.5,0.2,Iris-versicolor
5.0,3.6,1.4,0.2,Iris-versicolor
5.4,3.9,1.7,0.4,Iris-virginica
4.6,3.4,1.4,0.3,Iris-virginica
5.0,3.4,1.5,0.2,Iris-virginica

有 3 个物种，我的目标是为每个物种设计不同的 CSS class。我的代码中的这一段（取自 Mike Bostock 的平行坐标示例）应用了 class，但它将 class 应用于所有内容。

foreground = svg.append("g")
.attr("class", "foreground")
.selectAll("path")
.data(cars)
.enter().append("path")
.attr("d", path);

我是 d3.js 的新手，如果有人能帮我弄清楚如何根据各自的物种对这些线条进行颜色编码，那将非常有帮助。

Link 到 jsfiddle：http://jsfiddle.net/flyingburrito/nxjesunj/1/

Answer 1

如果我没理解错的话，你想使用物种名称设置每个 <path> 的 class。您可以在附加 <path>s:

时执行此操作

foreground = svg.append("g")
    .attr("class", "foreground")
    .selectAll("path")
    .data(cars)
    .enter().append("path")
    .attr("d", path)
    .attr("class", function(d){ return d.Species.split("-")[1]; }); // <-----

这里我传递 .attr("class", ...) 一个函数，它可以提取每个数据的物种名称。我使用 d.Species.split("-")[1] 因为每个物种名称都以 "Iris-".

开头

结果如下：

将 class 应用于 CSV 文件中的特定数据

Apply class to specific data in CSV file

d3.js