Question

我正在使用d3绘制一个箱线图。我想在x轴上追加标题（这不是x轴的标签/刻度标记）

由于某些原因，标题不会出现在页面上，并且没有报告错误。我检查了数组的值，它们是正确的。例如[A，B，C]

仅供参考，'text'元素后来不会附加在svg元素上

这是我的代码

if (xAxisHeaderAr.length > 0) {
        console.log("inside ok!");
        console.log("xAxisHeaderAr:" + xAxisHeaderAr);//[A,B,C] this is correct values!

        svg.selectAll("text")
            .data(xAxisHeaderAr)
            .enter()
            .append("text")
            .text(function (d) { return d; }) // should return A then B then C
                                                 // but nothing happens here

            .attr({
                "class": "xAxisSubHeader",
                "text-anchor": "middle",
                "x": (w/2*padding)/4, 
                "y": padding - 10
            });

    }

Answer 1

问题是你已经绘制了轴，其中包含text个元素。正如评论中所指出的那样，当您执行svg.selectAll("text")时，会选择这些。 D3的数据匹配默认工作方式是它使用数组中的索引进行匹配，即第一个数据项与选择中的第一个元素匹配，依此类推。这意味着在这种情况下，所有数据都与text元素匹配，.enter()选项为空。因此没有任何附加内容。

在您的情况下解决此问题的唯一方法是为标签指定一个可区分的类，并根据该选择进行选择：

svg.selectAll("text.label")
        .data(xAxisHeaderAr)
        .enter()
        .append("text")
        .attr("class", "label")
        .text(function (d) { return d; });

另一种方法是告诉D3如何通过向.data()提供键函数来匹配数据，但在您的情况下这不是一个选项，因为标签和x轴标签下的数据完全相同（如果我正确解释你的变量名。）

d3附加一个文本数组

1 个答案: