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 に答える