vlio20 vlio20 - 1 year ago 236
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?


Answer Source

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:


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download