将类应用于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类来设置每个物种的样式。我的代码中的这一部分（取自Mike Bostock的Parallel Coordinates示例）应用了一个类，但它将类应用于所有内容。

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

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

链接到jsfiddle：http://jsfiddle.net/flyingburrito/nxjesunj/1/

Answer 1

如果我理解正确，您希望使用物种名称设置每个class的{​​{1}}。您可以在追加<path> s：

时执行此操作

<path>

我在这里传递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]开头。

结果如下：