Question

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/

Answer 1

问题与您如何选择要将路径元素追加到的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/

D3.symbol在屏幕的一角。我想移动它

1 个答案: