Javascript D3js追加嵌套元素

Javascript D3js追加嵌套元素,javascript,d3.js,Javascript,D3.js,我有d3js部队布局。我试图在每个节点上附加一个嵌套元素。 代码如下: node .append("div") .attr("width", 60) .attr("height", 60); node.select("div") .append("image") .attr("xlink:href", function(d) { return d.url

我有d3js部队布局。我试图在每个节点上附加一个嵌套元素。 代码如下:

node
    .append("div")
    .attr("width", 60)
    .attr("height", 60);

    node.select("div")
        .append("image")
            .attr("xlink:href", function(d)
            {
                return d.url
            })
            .attr("x", -8)
            .attr("y", -8)
            .attr("width", 30)
            .attr("height", 30);

    node.select("div")
        .append("text")
            .attr("dx", 12)
            .attr("dy", ".35em")
            .text(function(d) { return d.name });
我得到的结果是:

<div width="60" height="60">
     <image xlink:href="image.jpg" x="-8" y="-8" width="30" height="30">
     </image>
     <text dx="12" dy=".35em">mp3</text>
</div>

mp3
问题是我看不到图像和文本

怎么办


感谢使用g元素,它可以将元素放置在正确的位置。如果要使用div而不是g,则必须将div定位为浮动在svg的顶部

#canvas {
  position: relative;
}
#canvas.div {
  position: absolute;
  top: 320px;
  left: 150px;
}
画布是添加svg的地方。我在这里使用这种技术:


在SVG中不能使用
div
s。改用
g
元素。