javascript - 附加文本不会显示 d3.js

Question

我希望这是一个简单的问题，

我只是想将一个 div 附加到我的显示文本的 svg 中。我已经为此开发了代码，在 DOM 中显示我的 svg 附加了类，里面有所需的文本。但是，页面上没有显示任何文本。

我希望有人能够指出我哪里出错了？

这是代码；

http://plnkr.co/edit/LxD1TarajR8dZUS7MbHg?p=preview

var vis = d3.select("#chart").selectAll("svg")
  .data(dataset)
  .enter()
  .append('svg')
  .attr("class", "svgCircle") //Append svg class
  .attr('width', width)
  .attr('height', height)
  .append('g')
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")

vis.append("circle")
  .attr("fill", "#ffffff")
  .attr("stroke", "#dfe5e6")
  .attr("stroke-width", 1)
  .attr('r', width / 2)

d3.selectAll(".svgCircle") // append label to circles
  .append("div")
  .attr("class", "circleLabel")
  .append("text")
  .text(function(d) {
    return d.label
  })

Answer 1

正如@RobertLongson 所说，您只能使用 foreignObject 将 html 放入 svg(这在 IE 中不起作用)。

除此之外，我建议采用 svg 方式

结果:http://plnkr.co/edit/rb18RQTT7tBeo8lJXVpO?p=preview

d3.selectAll(".svgCircle")
  .append("text")
  .text(function(d) {
    return d.label
  })
  .style("stroke","black")
  .attr("dy", "1em");

您可以控制文本的所有属性，而不是您的“我可以更好地控制文本的位置等”评论。我只是给了一个 dy 和 stroke 属性，但是你可以用你喜欢的任何方式给文本着色和塑造形状