d3.js - 将文本添加到新添加的元素

Question

这是您需要的全部代码：

https://raw.github.com/alignedleft/d3-book/master/chapter_09/25_adding_values.html

它在D3本地引用，但为了更快地工作，您可以像这样从其网站上引用它：

<script src="http://d3js.org/d3.v3.min.js"></script>

它将创建一些这样的图表：

注意那些没有文本标签的新添加的图表。

添加标签的部分代码位于代码的最后，是这样的：

            svg.selectAll("text")
               .data(dataset)
               .transition()
               .duration(500)
               .text(function(d) {
                    return d;
               })
               .attr("x", function(d, i) {
                    return xScale(i) + xScale.rangeBand() / 2;
               })
               .attr("y", function(d) {
                    return h - yScale(d) + 14;
               });

作为练习，我正在尝试修改代码，以便我也可以使用它们的文本数据更新新栏，但仍然无法弄清楚。你会怎么做？

Answer 1

您需要处理.enter()选择。代码看起来像这样。

svg.selectAll("text")
           .data(dataset)
           .enter()
           .append("text")
           .text(function(d) {
                return d;
           })
           .attr("x", function(d, i) {
                return xScale(i) + xScale.rangeBand() / 2;
           })
           .attr("y", function(d) {
                return h - yScale(d) + 14;
           });

查看本教程以获取更多信息。