正確附加 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

而這裡是小提琴 。