Javascript D3js追加嵌套元素
我有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
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
元素。