D3 Sunburst клип путь текст

Question

Я пытаюсь реализовать визуализацию d3 на основе Санберста диаграмме, и я нашел почти идеальный онлайн пример этого, который я получил рабочий
http://tributary.io/inlet/4127332/:

Моя основная проблема заключается в том, что мне нужно также скопировать текст в сегмент, я попытался использовать путь к SVG-клиенту, но мои скудные навыки d3 подвели меня. Любая помощь с этим оценивается.

Answer 1

Так что моя первая попытка клипа текста не работает, и я думаю, это потому, что координатное пространство дуги не совпадает с пространством координат текста так, как вы хотите, если используете дуговый генератор, так как ты.

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

важных частей добавления пути клипа (обратите внимание на использование нового поля ID):

svg.append('defs') 
    .selectAll("clipPath") 
    .data(partition.nodes) 
    .enter().append('svg:clipPath') 
    .attr('id', function(d,i) { return d.id;}) 
    .append('path').attr('d', arc); 

Тогда вы просто должны ссылаться на них на ваши группы узлов (опять используя идентификатор):

group = 
    svg.selectAll("g") 
    .data(partition.nodes) 
    .enter().append('svg:g') 
    .attr('clip-path', function(d,i) { return 'url(#' + d.id + ')';}); 

в притоке я положил данные SVG присоединиться к первой, так что узел «DEFS» появится в обычном месте (первый после SVG тега), но я не думаю, что это технически необходимо.