twitter-bootstrap - d3.js:使用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>已解决。

有谁知道该怎么做？谢谢

最佳答案

我通过添加像这样的字形来使它起作用:

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

关于twitter-bootstrap - d3.js:使用glyphicon类附加一个范围，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25969496/