如何在d3.js中的文本中放置断点

我画了一个饼图，我想有一个断点的标签。标签是我从csv文件中获得的状态和百分比

var g = svg.selectAll(".arc")
        .data(pie(data))
        .enter().append("g")
        .attr("class", "arc")


        g.append("path")
        .attr("d", arc)
        .style("fill","#FFFFFF")
        .transition()
        .ease("bounce")
        .duration(2000)
        .delay(function(d, i) {return i * 1000;})
        .style("fill", function(d) {return color(d.data.Source);});

        g.append("text")
        .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
        .attr("dy", ".35em")
        .style("text-anchor", "middle")
        .html(function(d) { 
            if (eval(d.data.Components) >0)
               {
                   return ((d.data.status) + " </br>  "  + "     " + d.data.Percentage + "%");
               }

    });

var g=svg.selectAll（“.arc”）
.数据（pie（数据））
.enter（）.append（“g”）
.attr（“类”、“弧”）
g、 附加（“路径”）
.attr（“d”，弧）
.style（“填充”，“#FFFFFF”）
.transition（）
.轻松（“反弹”）
.期限（2000年）
.delay（函数（d，i）{返回i*1000；}）
.style（“fill”，函数（d）{返回颜色（d.data.Source）；}）；
g、 附加（“文本”）
.attr（“变换”，函数（d）{return“translate”（+arc.centroid（d）+”）；}）
.attr（“dy”，“.35em”）
.style（“文本锚定”、“中间”）
.html（函数（d）{
如果（评估（数据组件）>0）
{
返回（（d.data.status）+“
”+“”+d.data.Percentage+“%”）；
}
});

元素中的

文本

不允许

br

标记

从：

每个“text”元素都会导致呈现单个文本字符串。SVG不执行自动换行或换行。要实现多行文字的效果，请使用以下方法之一：

• 作者或创作包需要预先计算换行符并使用多个“文本”元素（每行文本一个）

• 作者或创作包需要预先计算换行符，并将单个“text”元素与一个或多个“tspan”子元素一起使用 属性“x”、“y”、“dx”和“x”具有适当值的元素 “dy”为那些开始新字符设置新的开始位置 线。（此方法允许用户跨多行选择文本。） 文本的选择--请参见文本选择和剪贴板操作。）

• 表示要在另一个XML名称空间中呈现的文本，例如内嵌在“foreignObject”元素中的XHTML[XHTML]。（注： 这种方法的确切语义目前还没有完全定义 这一次。）

---

例如，在您的情况下，您必须将

d.data.status

和

d.data.Percentage+“%”

放在

text

元素中两个不同的

tspans

中，并手动指定

dy

使它们垂直对齐，.

可替代

tspan

和

text

元素的是

foreignObject

。您可以附加一个

外来对象

，然后附加普通HTML。对你来说，它会像这样：

g.append("foreignObject")
  .attr("width", "100px")
  .attr("height", "100px")
  .append("xhtml:div")
  .html(function(d) { 
    return ((d.data.status) + " <br>  "  + "     " + d.data.Percentage + "%");
  });

g.append（“外来对象”）
.attr（“宽度”，“100px”）
.attr（“高度”，“100px”）
.append（“xhtml:div”）
.html（函数（d）{
返回（（d.data.status）+“
”+”+d.data.Percentage++“%”）；
});

---

我发现这种方法比过去的

tspan

和

text

元素更容易使用，因为它不需要附加和定位更多的元素。

你可以像这样使用tspan:hii@jczaplew我试过你的代码，它对我来说工作得很好。实际上，在我的例子中，当有人在节点上单击鼠标时追加文本。所有链接信息都显示为换行符。但当用户在另一个节点上移动鼠标时，之前的信息只会停留在那个里。它应该取代，但它的重叠。你能告诉我怎么计算这个prb吗