正确附加 SVG 元素

这是一个相对常见的错误：例如，你在条形图中创建了 rect 元素，并且你想要添加文本标签（例如，该条的值）。因此，使用你用于附加 rect 的相同变量并定义其 x 和 y 位置，你可以附加 text 元素。非常逻辑，你可能会想。但这不起作用。

这个错误是怎么发生的？

让我们看一个具体的例子，一个用于创建条形图的基本代码（ 在这里小提琴 ）：

var data = [210, 36, 322, 59, 123, 350, 290];

var width = 400, height = 300;

var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

var bars = svg.selectAll(".myBars")
    .data(data)
    .enter()
    .append("rect");

bars.attr("x", 10)
    .attr("y", function(d,i){ return 10 + i*40})
    .attr("width", function(d){ return d})
    .attr("height", 30);

这给了我们这个结果：

https://i.stack.imgur.com/r4BNZ.jpg

但是你想添加一些文本元素，也许每个条形图都有一个简单的值。所以，你这样做：

bars.append("text")
   .attr("x", 10)
   .attr("y", function(d,i){ return 10 + i*40})
   .text(function(d){ return d});

而且，瞧：没有任何反应！ 如果你怀疑它，这就是小提琴 。

“但我看到了标签！”

如果你检查这个最后一个代码创建的 SVG，你会看到这个：

https://i.stack.imgur.com/zjtgh.jpg

在这一点上，很多人都说：“但我看到了文字标签，它附加了！”。是的，它是，但这并不意味着它会起作用。你可以附加任何东西 ！ 看到这个，例如：

svg.append("crazyTag");

它会给你这个结果：

<svg>
    <crazyTag></crazyTag>
</svg>

但是你不希望任何结果只是因为标签在那里，对吗？

以正确的方式附加 SVG 元素

了解 SVG 元素可以容纳孩子，阅读规范 。在我们的最后一个例子中，代码不起作用，因为 rect 元素不能包含 text 元素。那么，如何显示我们的文本？

创建另一个变量，并将 text 附加到 SVG：

var texts = svg.selectAll(".myTexts")
    .data(data)
    .enter()
    .append("text");

texts.attr("x", function(d){ return d + 16})
    .attr("y", function(d,i){ return 30 + i*40})
    .text(function(d){ return d});

这就是结果：

https://i.stack.imgur.com/4I2rw.jpg

而这里是小提琴 。