CSS精灵+ D3.js

Question

I'm trying to append HTML elements within a <circle> and then use CSS-Sprite to fill them, but so far I can't see them!

Here's what im doing:

 //Create the node in order to use the Force Layout
 var node = svg.selectAll(".container")
    .data(data)
    .append("circle")
    .attr("class", "dot")
    .attr("r", radius)
    .attr("cx", function(d) { return x(d[xVar]); }) //xAxis position
    .attr("cy", function(d) { return y(d[yVar]); }) //yAxis position
    .append("xhtml:i")
    .attr('class',  function(d) {
      return 'sprite '+ d['css-code'];
    });

And my css:

.sprite{
    position: absolute; 
    background:url(sprite.png) no-repeat;
}

.ad{background-position:0 -704px;}
.ae{background-position:0 -736px;}
.etc

They are being generated and I can see them on my browser inspector with the correct css atributes but they just won't appear.

How do I use CSS-Sprites with D3's Force Layout?

Answer 1

You're inserting the <i> elements directly within the SVG <circle> elements, which is not legal SVG markup. There are at least a couple of alternatives that you could use.

• Make the nodes <g> elements which would contain both the <circle> elements and a different element for the sprite.

• Insert the HTML sprites directly in the HTML container for the graph and absolutely position them to correspond with the node positions.