我在基于CSV源文件的分层数据结构中使用D3库和D3更新模式。我正在尝试附加一些文本,并根据在数据的每个级别创建的节点的depth属性,使文本显示方式有所不同。这些节点由圆形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中。我还检查了textPath和path标记的ID属性是否相同。我是否在这里缺少任何内容,因为文本和路径都没有显示?