为什么在轴后绘制时不显示图表上的标签

Question

我正在使用d3.js制作带有图表内标签的简单折线图。

当我在标签之前绘制轴时，后者不会被添加到svg元素中，但是如果我先绘制它们就会这样做：

在第二张图表中，标签不仅仅是隐藏的。它们根本没有被附加到DOM。

Here's the bl.ock。两个脚本之间的唯一区别是before.js在轴之前写入标签，而after.js之后则执行。{/ p>

为什么会这样？

Answer 1

添加标签时问题是这一行：

svg.selectAll('text')

如果此时已绘制轴。将有text个元素，上面的选择不会为空。在其上调用.data()会导致D3将数据元素与选择中的DOM元素进行匹配。在这种情况下，所有内容都匹配，因此.enter()选项为空，并且不会添加新标签。

如果您首先运行此代码，则它有效，因为没有text元素，选择为空且没有数据匹配。为了防止这种情况，您可以使用类明确标识text元素：

svg.selectAll('text.label')
    .data(dataset)
    .enter()
        .append('text')
        .attr("class", "label")
        .text(Math.floor)
        .attr('class', 'data-label')
        .attr('x', function (d, i) { return x(i); })
        .attr('y', function (d, i) { return y(d + 1); });

使用此代码，无论是在添加轴之前还是之后运行它都无关紧要。