颜色编码平行坐标答案

【问题标题】：Color coding Parallel Coordinates颜色编码平行坐标
【发布时间】：2016-05-04 13:28:14
【问题描述】：

我已经有一个代码平行坐标图，一切正常。现在我正在尝试使用颜色对平行坐标可视化进行颜色编码，但是出了点问题。在数据集 (http://archive.ics.uci.edu/ml/machine-learning-databases/wine/wine.data) 中，我有不同的葡萄酒种类名称（第一列是类别标识符 (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);
      })

【问题讨论】：

d.name 的值是什么？
如果这是一个二项式命名法，那么您只会得到带有var species 的属。如果您正在处理二项式名称，例如“Vitis vinifera”，最好的办法是将属和特定加词连接在一起，使用以下命令：str = str.replace(/\s/g, '');它会将“Vitis vinifera”变成“Vitisvinifera”。
我命名为“名称”数据集的第一列 (archive.ics.uci.edu/ml/machine-learning-databases/wine/…) 值为 1,2,3
但第一列只是一个数字。在这种情况下，您不需要slice。
种被命名为1、2、3

标签： javascript csv d3.js

【解决方案1】：

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

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

【讨论】：