d3 Пончик центральный текстовый тип: заменить пробелы на новые строки - PullRequest
Новая
       30

d3 Пончик центральный текстовый тип: заменить пробелы на новые строки

0 голосов
/ 25 сентября 2019

http://bl.ocks.org/erichoco/6694616

d.Family содержит имена меток для каждого пончика 

var donuts = d3.selectAll('.donut');

// The circle displaying total data.
donuts.append("svg:circle")
    .attr("r", chart_r * 0.6)
    .style("fill", "#E7E7E7")
    .on(eventObj);

donuts.append('text')
    .attr('class', 'center-txt type')
    .attr('y', chart_r * -0.16)
    .attr('text-anchor', 'middle')
    .style('font-weight', 'bold')
    .text(function (d, i) {
        return d.Family;
    });

Как заменить пробелы в значениях d.Family новыми строками?Эти текстовые метки перекрывают границы моей кольцевой диаграммы.Это выглядит некрасиво. 

var insertLinebreaks = function (d) {
    var el = d3.select(this);
    var words = d.split(' ');
    el.text('');

    for (var i = 0; i < words.length; i++) {
        var tspan = el.append('tspan').text(words[i]);
        if (i > 0)
            tspan.attr('x', 0).attr('dy', '15');
    }
};
donuts.selectAll('g.text.center-txt type').each(insertLinebreaks);
...