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 example here

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

1 个答案: