D3.js附加svg / dom元素不起作用

Question

所以我正在嘗試將dom或svg元素附加到一個圓上（后者可以避免異物）。 我在做這個

        var tooltip  = d3.select(this).append("text")
            .attr("class", "tooltip")
            .text("HELLO")
            .attr('x', 1000)
            .attr('y', 1000);

這是圓形svg元素。

但是，這不起作用-

但是我看不到網頁上的效果。

為什么？

Answer 1

在SVG中，您不能將text元素附加到circle元素上-規范不允許這樣做。 將它們附加到g元素或頂級SVG，否則將不會顯示。

Answer 2

如果您想一起移動，設置動畫或定位某些svg元素，則需要創建一個group元素並將所有這些元素附加到該組中。

<g>
   <circle cx="20" cy="20" r="20" fill="green" />
   <circle cx="70" cy="70" r="20" fill="purple" />
</g>

那么您可以添加適用於所有屬性的屬性：

<g stroke="black" stroke-width="2" fill="#fff">

並且“轉換”也是可用的屬性：

<g transform="translate(80,0)">
   <circle cx="20" cy="20" r="20" fill="green" />
   <circle cx="70" cy="70" r="20" fill="purple" />
</g>

但是，如果您正在使用該死的D3.js，則需要將其附加到svg名稱空間。

var tooltip  = d3.append('svg:g').append("svg:text")
            .attr("class", "tooltip")
            .text("HELLO")
            .attr('x', 1000)
            .attr('y', 1000);
tooltip.append('svg:circle').attr('fill','#f00');