Я использую библиотеку D3 и шаблон обновления D3 в иерархической структуре данных на основе исходного файла CSV.Я пытаюсь добавить текст и отображать его по-разному в зависимости от свойства глубины узлов, созданных на каждом уровне данных.эти узлы представлены круговым элементом SVG и имеют соответствующее свойство описания, которое содержит текст.
var nodes = chart.selectAll(".node").data(toRender);
var nodesUpdate = nodes.merge(nodesEnter);
//normal nodes
nodesUpdate.select("text")
.attr("x",function(d){return d.x < 180 ===!d.hidden ? 6 :-6;
})
.text(function(d) {
if(d.depth>1){
return d.data.description
}else{
return;
}})
//special nodes that I want a circular path text for
nodesUpdate.select("text")
.append("path")
.attr("id", function(d){return d.data.id}) //Unique id of
the path
.attr("d", function(d) {return getPathData(d)}) //SVG path
.style("fill", "none")
.style("stroke", "#AAAAAA");
nodesUpdate.select("text")
.append("textPath") //append a textPath to the text element
.attr("xlink:href", function(d){return d.data.id}) //place
the ID of the path here
.style("text-anchor","middle") //place the text halfway on
the arc
.attr("startOffset", "50%")
.text(function(d){ if(d.depth<2){
return(d.data.description);
}else{
return;
}
})
.style("fill", "none")
.style("stroke", "#BBBBBB");
Новые текстовые пути создаются правильно и добавляются в DOM, когда я его проверяю.Также я проверил, что атрибут ID одинаков как для textPath, так и для тегов path.Я что-то здесь упускаю, так как ни текст, ни путь не отображаются?