D3js append nested elements

Question

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 1

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