I'm attempting to add HTML elements inside a <circle> and then utilize CSS-Sprites for styling, but I'm having trouble getting them to display!
This is my current approach:
//Creating the node for use in 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]); })
.attr("cy", function(d) { return y(d[yVar]); })
.append("xhtml:i")
.attr('class', function(d) {
return 'sprite '+ d['css-code'];
});
Here is my CSS code:
.sprite{
position: absolute;
background:url(sprite.png) no-repeat;
}
.ad{background-position:0 -704px;}
.ae{background-position:0 -736px;}
.etc
Although they are being created and the browser inspector shows correct CSS properties, they are not visible.
How can I effectively use CSS-Sprites with D3's Force Layout?