twitter-bootstrap – d3.js：用glyphicon类附加一个span

以下代码正常工作.它画了一个圆圈.我想要的是在这个圆圈里面绘制一个bootstrap glyphicon：< span class =“glyphicon glyphicon-zoom-in”>< / span>

d3.json("relations",function(error,graph) {
    var links = svg.selectAll()
        .data(graph.links).enter();

    links        
      .append("circle")
      .attr("class","circle")
      .attr("r",circle_r)
      .attr("cx",function(d) { return d.x; })
      .attr("cy",function(d) { return d.y; });

我试图做以下继续前面的代码：

链接
.append( “跨度”)
.attr(“class”,“glyphicon glyphicon-zoom-in”)

但符号不呈现.我想有一些关于定位它的东西,因为使用firebug / inspector我可以看到< span>入驻.

有谁知道怎么做？谢谢

解决方法

我通过添加像这样的glyphicons来实现这个目的：

link.append("svg:foreignObject")
    .attr("width",20)
    .attr("height",20)
    .attr("y","-7px")
    .attr("x","-7px")
  .append("xhtml:span")
    .attr("class","control glyphicon glyphicon-zoom-in");

通过使.glyphicon的位置静态：

.control.glyphicon {
  position: static;
}

Plnkr example here