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

Question

我正在使用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?

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

由于

Answer 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; })

因为这不再适用。

结果在这里：

不是很漂亮，但也许更接近你想要达到的目标。

希望这有帮助