javascript - 如何在平行坐标可视化中为每个垂直轴设置标签？

Question

我是 d3.js(和 stackoverflow)的新手，目前正在研究平行坐标示例。我目前正在为数据使用一个名为“行”的二维数组。在每个垂直轴上方是标签“0”或“1”或“2”等。但是，我希望每个垂直轴都标有行 [0][i] 中的文本。我相信数字 0、1、2 来自数据。关于如何使用 row[0][i] 中的标签的任何建议？我怀疑我做错了一些非常基本的事情。这是相关的代码。谢谢!

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

    // Add a group element for each dimension.
    var g = svg.selectAll(".dimension")
                .data(dimensions)
                .enter().append("g")
                .attr("class", "dimension")
                .attr("transform", function (d) { return "translate(" + x(d) + ")"; });

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

Answer 1

如果您只有一组受控的轴(如三轴)，您可能只想单独设置它们，如下所示...

svg.append("text").attr("class","First_Axis")
    .text("0")
    .attr("x", first_x_coordinate)
    .attr("y", constant_y_coordinate) 
    .attr("text-anchor","middle");

svg.append("text").attr("class","Second_Axis")
    .text("1")
    .attr("x", first_x_coordinate + controlled_offset)
    .attr("y", constant_y_coordinate) 
    .attr("text-anchor","middle");

svg.append("text").attr("class","Third_Axis")
    .text("2")
    .attr("x", first_x_coordinate + controlled_offset*2)
    .attr("y", constant_y_coordinate) 
    .attr("text-anchor","middle");

但是，如果您动态放置了依赖于数据的轴，您可能希望使用保持 y 坐标常数的函数放置轴信息，同时根据固定的“偏移量”(即数据驱动的)确定 x 坐标轴位置)。例如……

svg.append("text")
    .attr("class",function(d, i) {return "Axis_" + i; })
    .text(function(d,i) {return i; })
    .attr("x", function(d, i) { return (x_root_coordinate + x_offset_value*i); })
    .attr("y", constant_y_coordinate) 
    .attr("text-anchor","middle");

希望对您有所帮助。

弗兰克