Javascript 颜色编码平行坐标

我已经有了绘制平行坐标的代码，效果很好。我可以为一些特征绘制平行坐标（

标签，特征1，特征2，…，特征5

：我数据库的一些特定列）

在我的测试输入文件中，

label

feature的值为1、2或3。现在，我想删除

标签

轴，而是使用3种颜色对平行坐标可视化进行颜色编码。我不知道怎么做。如果你能帮助我，我将不胜感激

var m = [30, 10, 10, 10],
    w = 800 - m[1] - m[3],
    h = 500 - m[0] - m[2];

var x = d3.scale.ordinal().rangePoints([0, w], 1),
    y = {},
    dragging = {};

var line = d3.svg.line(),
    axis = d3.svg.axis().orient("left"),
    background,
    foreground;

var svg = d3.select("body").append("svg:svg")
    .attr("width", w + m[1] + m[3])
    .attr("height", h + m[0] + m[2])
    .append("svg:g")
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

// Input data (test.csv) is in this link : http://pastebin.com/raw.php?i=8nTGRenj
d3.csv("test.csv").row(function (d) {
    return {
        // Features that are needed to be visualize
        label: d.label,

        feature1: d.feature1,
        feature2: d.feature2,
        feature3: d.feature3,
        feature4: d.feature4,
        feature5: d.feature5
    };
})
    .get(function (e, data) {
    x.domain(
    dimensions = d3.keys(data[0])
        .filter(function (d) {
        if (d == "label") {
            y[d] = d3.scale.linear()
                .domain(d3.extent(data, function (p) {
                return +p[d];
            }))
                .range([h, 0]);
        } else {
            y[d] = d3.scale.linear()
                .domain([0, 100])
                .range([h, 0]);
        }
        return true;
    }));

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

    // Add blue foreground lines for focus.
    foreground = svg.append("svg:g")
        .attr("class", "foreground")
        .selectAll("path")
        .data(data)
        .enter().append("svg:path")
        .attr("d", path);

    // Add a group element for each dimension.
    var g = svg.selectAll(".dimension")
        .data(dimensions)
        .enter().append("svg:g")
        .attr("class", "dimension")
        .attr("transform", function (d) {
        return "translate(" + x(d) + ")";
    })
        .call(d3.behavior.drag()
        .on("dragstart", function (d) {
        dragging[d] = this.__origin__ = x(d);
        background.attr("visibility", "hidden");
    })
        .on("drag", function (d) {
        dragging[d] = Math.min(w, Math.max(0, this.__origin__ += d3.event.dx));
        foreground.attr("d", path);
        dimensions.sort(function (a, b) {
            return position(a) - position(b);
        });
        x.domain(dimensions);
        g.attr("transform", function (d) {
            return "translate(" + position(d) + ")";
        });
    })
        .on("dragend", function (d) {
        delete this.__origin__;
        delete dragging[d];
        transition(d3.select(this)).attr("transform", "translate(" + x(d) + ")");
        transition(foreground)
            .attr("d", path);
        background.attr("d", path)
            .transition()
            .delay(500)
            .duration(0)
            .attr("visibility", null);
    }));

    // Add an axis and title.
    g.append("svg:g")
        .attr("class", "axis")
        .each(function (d) {
        d3.select(this).call(axis.scale(y[d]));
    })
        .append("svg:text")
        .attr("text-anchor", "middle")
        .attr("y", -9)
        .text(String);

    // Add and store a brush for each axis.
    g.append("svg:g")
        .attr("class", "brush")
        .each(function (d) {
        d3.select(this).call(y[d].brush = d3.svg.brush().y(y[d]).on("brush", brush));
    })
        .selectAll("rect")
        .attr("x", -8)
        .attr("width", 16);
});

function position(d) {
    var v = dragging[d];
    return v === null ? x(d) : v;
}

function transition(g) {
    return g.transition().duration(500);
}

// Returns the path for a given data point.
function path(d) {
    return line(dimensions.map(function (p) {
        return [position(p), y[p](d[p])];
    }));
}

// Handles a brush event, toggling the display of foreground lines.
function brush() {
    var actives = dimensions.filter(function (p) {
        return !y[p].brush.empty();
    }),
        extents = actives.map(function (p) {
            return y[p].brush.extent();
        });
    foreground.style("display", function (d) {
        return actives.every(function (p, i) {
            return extents[i][0] <= d[p] && d[p] <= extents[i][1];
        }) ? null : "none";
    });
}

此外，您可以在此处找到我的代码：

---

（另外，“test.csv”是；我无法将其链接到我的代码。）

我无法让您的示例正常工作，但我可以告诉您该怎么做

首先，您需要创建一个颜色比例，它是顺序比例。然后，您可以将域设置为输入值的数组（在您的案例1、2和3中），范围应该是与这些输入对应的颜色。例如：

var color = d3.scale.ordinal()
  .domain([1,2,3])
  .range(['red','green','blue']);

然后，在创建

路径

元素时，可以使用比例使笔划颜色成为标签数据的函数：

foreground = svg.append('svg:g')
  .attr('class', 'foreground')
  .selectAll('path')
  .data(data)
  .enter().append('svg:path')
  .attr('d', path)
  .attr('stroke', function(d) { return color(d.label); });

然后确保从css中删除前景的笔划样式，这样它就不会覆盖您提供的比例值

---

这使用了来自的cars数据的子集。

路径数据属性中填充了

NaN

值时出现了问题。我创建了一个plunk以便可以链接csv文件，但请检查控制台输出中的错误。

foreground = svg.append('svg:g')
  .attr('class', 'foreground')
  .selectAll('path')
  .data(data)
  .enter().append('svg:path')
  .attr('d', path)
  .attr('stroke', function(d) { return color(d.label); });