Добавленный текст не отображается - PullRequest
0 голосов
/ 28 февраля 2019

Я использую библиотеку 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.Я что-то здесь упускаю, так как ни текст, ни путь не отображаются?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...