CODEWITHSUNDEEP
javascriptd3.js
vlio20
vlio20

Reputation: 9295

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

Upvotes: 1

Views: 695

Answers (1)

Phuoc Do
Phuoc Do

Reputation: 1344

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

Upvotes: 2

Related Questions