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

Question

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

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

Answer 1

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

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

Важные части - это добавление путей к клипам (обратите внимание на использование нового поля 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), но я не думаю, что это технически необходимо.