如何在d3中自动换行图例标签答案

【问题标题】：How to word wrap legend labels in d3如何在d3中自动换行图例标签
【发布时间】：2015-01-11 11:54:59
【问题描述】：

我正在使用 d3 的 aster 图，圆弧周围带有图例标签。

一个工作示例here。

var text = arcs.append("svg:text")
.attr("transform", function(d) {
    d.outerRadius = outerRadius + 75;
    d.innerRadius = outerRadius + 70;
    return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle") //center the text on it's origin
.style("fill", "black")
.style("font", "bold 12px Arial")
.text(function(d, i) { return dataSet[i].legendLabel; }) // <- split this into multiple lines?

但我想在新行中打破长标签，我该如何实现呢？

谢谢

【问题讨论】：

How to linebreak an svg text in javascript?的可能重复
这里是your example updated，代码来自@LarsKotthoff 的回答。
谢谢马克，效果很好，你太棒了！！
我们如何在文本周围添加填充或边距，以便标签不会覆盖图表。
在您的代码中，位置由行d.outerRadius = outerRadius + 75; d.innerRadius = outerRadius + 70; 控制。如果您可以摆脱硬编码，那是最简单的。否则，您正在查看碰撞检测和it's not trivial。

标签： d3.js pie-chart

【解决方案1】：

您可以为每个文本元素添加一个换行功能。我不确定这是否是您的最佳选择，但这将是一个开始。

你的 wrap 函数只是用空格字符分割标签。您可以添加正则表达式以获得更大的灵活性。

function wordwrap(text) {
  var lines=text.split(" ")
  return lines
}

然后，对于每个文本元素，您可以循环遍历文本的每个包裹部分，而不仅仅是添加 text 属性。

var text = arcs.append("svg:text")
        .attr("transform", function(d) {
            d.outerRadius = outerRadius + 75;
            d.innerRadius = outerRadius + 70;
            return "translate(" + arc.centroid(d) + ")";
        })
        .attr("text-anchor", "middle") //center the text on it's origin
        .style("fill", "black")
        .style("font", "bold 12px Arial")
        .each(function (d, i) {
          var lines = wordwrap(dataSet[i].legendLabel)
          for (var i = 0; i < lines.length; i++) {
            d3.select(this).append("tspan")
                .attr("dy",13)
                .attr("x",function(d) { 
                   return d.children1 || d._children1 ? -10 : 10; })
                  .text(lines[i])
          }
        })

你需要删除你的行：

.text(function(d, i) { return dataSet[i].legendLabel; })

因为这将不再适用。

结果在这里：

不是很漂亮，但可能更接近您想要实现的目标。

希望对你有帮助

【讨论】：