CSS-Sprites + D3.js

Question

我试图在<circle>中添加HTML元素，然后使用CSS来填充它们，但是到目前为止我还看不到它们！

以下是我所做的：

 //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'];
    });

我的css：

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

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

它们正在生成，我可以在我的浏览器检查器上看到正确的css分布，但是它们不会出现。

我如何使用CSS-雪碧与D3的部队布局？

Answer 1

您将<i>元素直接插入到SVG <circle>元素中，这不是合法的SVG标记。至少有几个替代方案可以供您使用。

• 使节点<g>元素既包含<circle>元素，又包含雪碧的一个不同元素。
• 将HTML精灵直接插入到图形的HTML容器中，并将它们绝对定位为与节点位置相对应。