Как сложить этикетки легенды обертывания в d3

Question

Я использую диаграмму aster d3 с надписями легенды вокруг дуги.

Рабочий пример 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

Вы можете добавить функцию обертки для каждого из ваших текстовых элементов. Я не уверен, что это будет ваш лучший вариант, но это будет начало.

Функция переноса только разбивает метку символом пробела. Вы можете добавить регулярное выражение для большей гибкости.

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

как это не будет применимо больше.

Результат здесь:

Не очень красиво, но, возможно, ближе к тому, что вы хотите достичь.

Надеется, что это помогает