将文本添加到新添加的元素

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;
           });

有关详细信息，请查看this tutorial。