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

You can't use divs in SVG. Use a g element instead.

Lars Kotthoff
– Lars Kotthoff

2013-10-04 20:47:27 +00:00
Commented Oct 4, 2013 at 20:47 — Lars Kotthoff
– Lars Kotthoff, Commented Oct 4, 2013 at 20:47

Phuoc Do · Accepted Answer · 2013-10-04 21:00:46Z

2

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

answered Oct 4, 2013 at 21:00

Phuoc Do

1,34410 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

D3js append nested elements

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related