javascript - 颜色编码平行坐标

Question

我已经有了一个代码平行坐标图，一切正常。现在我尝试使用颜色对平行坐标可视化进行颜色编码，但有些问题。在数据集( http://archive.ics.uci.edu/ml/machine-learning-databases/wine/wine.data )中，我有不同的 Wine 品种名称(第一列是类别标识符(1-3))，但在图中仅绘制一种颜色。有人可以帮助我吗？

图表:

enter code here
    // CREATE A COLOR SCALE
var color = d3.scale.ordinal()
  .domain(['1','2','3'])
  .range(['red','blue','green'])

d3.csv("wine.csv", function(error, wine) {

  // Extract the list of dimensions and create a scale for each.
  x.domain(dimensions = d3.keys(wine[0]).filter(function(d) {
    return d != "name" && (y[d] = d3.scale.linear()
        .domain(d3.extent(wine, function(p) { return +p[d]; }))
        .range([h, 0]));
  }));

  // Add grey background lines for context.
  background = svg.append("g")
      .attr("class", "background")
    .selectAll("path")
      .data(wine)
    .enter().append("path")
      .attr("d", path);

  // USE THE COLOR SCALE TO SET THE STROKE BASED ON THE DATA
  foreground = svg.append("g")
      .attr("class", "foreground")
    .selectAll("path")
      .data(wine)
    .enter().append("path")
      .attr("d", path)
      .attr("stroke", function(d) {
        var species = d.name.slice(0,d.name.indexOf(' '));
        return color(species);
      })

Answer 1

一旦您已经定义了 domain 和 range 的颜色序数比例，您只需根据 d.name:

.attr("stroke", function(d) {
    return color(d.name);
  });