附加文字未显示

时间:2019-02-28 13:27:25

标签: d3.js svg

我在基于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属性是否相同。我是否在这里缺少任何内容,因为文本和路径都没有显示?

0 个答案:

没有答案