问题与您如何选择 svg 元素来附加路径元素有关。
在代码的开头,您创建一个新svg
元素并向其中添加一个g
元素,然后将其转换为所需的位置:
var svg = d3.select("#chart").append("svg:svg")
.append("svg:g")
.attr("transform", "translate(" + r + "," + r +") rotate(180) scale(-1, -1)");
重要的是要意识到变量svg
对应于内部g
元素。它的原点位于弧线的中心(从左上角平移 (500,500))。这是您要向其追加新元素的元素。事实上,在您的大部分代码中,您确实使用了该变量。例如:
var node = svg.selectAll("circle.node")
.data(nodes)
.enter().append("path")
.attr("class", "node")
现在,当您添加黑色三角形时,您使用了以下内容:
d3.select("#chart").select("svg").append("path")
但是,这将选择外部svg
元素,而我们想选择内部g
元素。当然,您可以通过以下方式解决它:
d3.select("#chart").select("svg").select("g").append("path")
,但更简洁的方法是继续使用 svg 变量:
svg.append("path")
.attr("d", d3.svg.symbol().type("triangle-up"))
.attr("transform", "translate(0,0)")
.style("fill", "black");
请参阅更新的小提琴:http: //jsfiddle.net/xwZjN/24/