Javascript D3.js追加svg/dom元素不工作

因此，我尝试将dom或svg元素附加到一个圆中（后者是为了避免外来对象）。我正在这么做

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

这里是圆形svg元素

然而，这不起作用-

但是我在网页上看不到效果

---

为什么？

在SVG中，不能将

文本

元素附加到

圆圈

元素——规范不允许这样做。将它们附加到

g

元素或顶级SVG，否则它们将不会显示。

如果要将某些SVG元素移动或设置动画或定位在一起，则需要创建一个组元素并将所有这些元素附加到组中

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

---

那么为什么它会出现在DOM中，但不会呈现呢？因为SVG规范不允许元素以这种方式嵌套。啊，好的，解决了这个问题。如果我通过-svg.append（“div”）.html（//retun somehtml）.attr（'x'，1000）.attr（'y'，1000）执行此操作，则不会将任何内容附加到域中，换句话说，如何将DOM元素包装到svg中？我尝试过svg.append（“g”）.append（“div”）.html（函数（）{return some html}）.attr（'x'，d3.event.pageX）.attr（'y'，d3.event.pageY）

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

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