vlio20 vlio20 - 1 month ago 13
Javascript Question

D3js append nested elements

I have d3js force layout. I am trying to append to each node a nested element.
Here is the code:

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


the result that I am getting is this:

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


The problem is that I don't see the image and text.

What to do?

Thanks

Answer

Use g element, it has transform to put your elements at the right place. If you want to use div instead of g, you'll have to position the div to float on top of svg.

#canvas {
  position: relative;
}
#canvas.div {
  position: absolute;
  top: 320px;
  left: 150px;
}

canvas is where you append your svg. I use this technique here:

http://vida.io/documents/SuRAGDs7J78HCvoxE

Comments