0 
d3.select("#svgpathSVGdata").select("svg").append("path")
    .attr("d", d3.svg.symbol().type("triangle-up"))
    .attr("transform", "translate(0,0)")
    .style("fill", "black");

这是我页面左上角的 svg.symbol。我希望至少将它放在中间，是否可以用 x 或 y 移动它？http://jsfiddle.net/xwZjN/21/

4

1 回答 1

0

问题与您如何选择 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/

于 2012-11-03T05:31:22.157 回答