vlio20 vlio20 - 8 months ago 69
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:

.attr("width", 60)
.attr("height", 60);

.attr("xlink:href", function(d)
return d.url
.attr("x", -8)
.attr("y", -8)
.attr("width", 30)
.attr("height", 30);

.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">
<text dx="12" dy=".35em">mp3</text>

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

What to do?



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: