我的问题与 JS D3 textPath isn't displayed 非常相似
唯一的区别是我想附加返回到链接的 json,而不仅仅是节点(好吧,对于每个具有指向其父级的链接的节点,我希望该链接具有相同的 json)。 .理想情况下,我实际上想从根节点向左添加一条线,并且无处可去。
然后,我基本上希望在链接中间有文本,并且遵循链接线会很好,但不是绝对必要的。
我当前的非工作代码是(我不确定,但是我需要向每个链接添加一个 id 元素吗?但是为此我需要 json!!!! 另外我需要 json也检索每个链接的文本)然后我想我使用 textPath 中的 id 来引用路径(如果我没记错的话),对吗?
var width = $("#graph").width(),
height = 200;
var cluster = d3.layout.cluster()
.size([height, width - 160]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var myDiv = document.getElementById('graph');
var svg = d3.select(myDiv).append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(40,0)");
d3.json("/datastreams/json/${_encoded}", function(error, root) {
var nodes = cluster.nodes(root),
links = cluster.links(nodes);
var link = svg.selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("d", diagonal);
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
link.append("text")
.style("font-size", function(d) { return d.selected ? "16px" : "10px"; })
.style("font-weight", function(d) { return d.selected ? "bold" : ""; })
.text(function(d) { return "SSSS="+d.name; });
node.append("circle")
.attr("r", function(d) { return d.selected ? 10 : 4.5; });
var refs = node.append("a")
.attr("xlink:href", function(d) { return d.root ? "start" : "end"; });
var text = refs.append("text")
.attr("dx", function(d) { return d.root ? 8 : -8; })
.attr("dy", -4)
.style("text-anchor", function(d) { return d.root ? "start" : "end"; });
text.append("tspan")
.style("font-size", function(d) { return d.selected ? "16px" : "10px"; })
.style("font-weight", function(d) { return d.selected ? "bold" : ""; })
.style("fill", function(d) { return "blue"; })
.text(function(d) { return d.name; });
});
d3.select(self.frameElement).style("height", height + "px");
</script>
最佳答案
啊,我们开始吧,因为这似乎有效(嗯,我还没有完全完成,但它非常接近我想要的)。
var textPath = path.each(function(l){
var aref = theG.append("a")
.attr("xlink:href", function(d) { return "http://databus.nrel.gov" });
var text = aref.append("text")
.style("fill", function(d) { return "blue"; });
var textPath = text.append("textPath")
.attr("startOffset", "50%")
.attr("xlink:href", "#path"+l.target.name)
.text("insert");
var aref2 = theG.append("a")
.attr("xlink:href", function(d) { return "http://databus.nrel.gov" });
var text2 = aref2.append("text")
.style("fill", function(d) { return "blue"; });
var textPath2 = text2.append("textPath")
.attr("startOffset", "60%")
.attr("xlink:href", "#path"+l.target.name)
.text("delete");
});
关于javascript - D3 集群布局中的链接和文本路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19231820/