d3.js:用glyphicon类附加一个span

Question

以下代码正常工作.它画了一个圆圈.我想要的是在这个圆圈里面绘制一个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; });

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

links .append("span") .attr("class", "glyphicon glyphicon-zoom-in")

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

有谁知道怎么做？谢谢

Answer 1

我通过添加像这样的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这里的例子