0

svg:image で既に Arc.Centroid を正常に使用しています。ただし、svg.symbol でセントロイドを使用しようとすると、attr X & Y は影響しません -

var q = svg.append("g")
 .attr("transform", function(d,i) {return "translate ("+ arc[i].centroid() +")";})
 .attr("x",100)
 .attr("y",-40)
  ; 

    q.append("path")
    .attr("d", d3.svg.symbol().type("circle").size(50))
    .attr("transform", "translate(-10, -5)")
    .style("fill", "black");

    q.append("text")
    .text("Hello");

私が言えることから、これはうまくいくはずです。別の変換属性も適用しました。

var q = svg.append("g")
 .attr("transform", function(d,i) {return "translate ("+ arc[i].centroid() +")";})
 .attr("transform", "translate(-150,-150)")

しかし、アークの中心から形状を変換しないと思います..これが私のフィドルです-

http://jsfiddle.net/xwZjN/29/

4

1 に答える 1

0

要素には属性がありgません。この種の情報は、SVG仕様にあります：http ：//www.w3.org/TR/SVG/struct.html#GElementxy

g次を使用して要素を移動できますtranslate transform：http ：//www.w3.org/TR/SVG/coords.html#TransformAttribute

たとえば、text要素には次の属性がxあります： http ://www.w3.org/TR/SVG/text.html#TextElementy

最後のコードスニペットでは、transform属性に2つの異なる値を書き込みます。後者の値は"translate(-150,-150)"、前者の値を上書きします。

var q = svg.append("g")
 .attr("transform", function(d,i) {return "translate ("+ arc[i].centroid() +")";})
 .attr("transform", "translate(-150,-150)")

SVG変換属性は、変換定義のリストを受け入れます：http ://www.w3.org/TR/SVG/coords.html#TransformAttribute

したがって、コードの最後の部分は次のように記述されている必要があります。

 var q = svg.append("g")
     .attr("transform", function(d,i) {
         return "translate ("+ arc[i].centroid() +")" + "translate(100,-40)";
     });

gブラウザの開発者ツール（Chromeで右クリックして選択inspect element）で要素を調べると、次のように表示されます。

<g transform="translate (-124.42599471897063,11.965443501796923)translate(100,-40)">
  <path d="M0,3.989422804014327A3.989422804014327,3.989422804014327 0 1,1 0,-3.989422804014327A3.989422804014327,3.989422804014327 0 1,1 0,3.989422804014327Z" transform="translate(-10, -5)" style="fill: #000000; "></path>
  <text>Hello</text>
</g>

コンテナで2つの変換操作が表示されます。http://jsfiddle.net/xwZjN/30/

別のオプションは、パスとテキストを別のgコンテナにグループ化することです。このようなもの：

<g transform="translate (-124.42599471897063,11.965443501796923)">
  <g transform="translate(100,-40)">
    <path d="M0,3.989422804014327A3.989422804014327,3.989422804014327 0 1,1 0,-3.989422804014327A3.989422804014327,3.989422804014327 0 1,1 0,3.989422804014327Z" transform="translate(-10, -5)" style="fill: #000000; "></path>
    <text>Hello</text>
  </g>
</g>
于 2012-11-07T21:46:46.363 に答える