我试图在<circle>内附加HTML元素,然后使用CSS-Sprite填充它们,但到目前为止我看不到它们!

我在做什么:

 //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的“力布局”一起使用?

最佳答案

您将直接在SVG <i>元素内插入<circle>元素,这不是合法的SVG标记。至少可以使用两种选择。


使节点<g>元素既包含<circle>元素,又包含精灵的其他元素。
将HTML Sprite直接插入到图形的HTML容器中,并对其进行绝对定位以与节点位置相对应。

10-05 20:39
查看更多