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元素放在一起，则需要创建一个组元素并将所有这些元素附加到该组中。

<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">

和＆＃34;转换＆＃34;也是一个可用的属性：

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