使用Arc.Centroid定位形状，但由于某种原因X&Y不会影响它

Question

我已经在一个svg:image上成功地使用了Arc.Centroid。但是，当我尝试使用带有svg.symbol的质心时，属性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/

Answer 1

g元素没有x和y属性。您可以在SVG规范中找到这种信息：http://www.w3.org/TR/SVG/struct.html#GElement

您可以使用translate transform移动g元素：http://www.w3.org/TR/SVG/coords.html#TransformAttribute

例如，text元素确实具有x和y属性：http://www.w3.org/TR/SVG/text.html#TextElement

在最后一段代码中，您向transform属性写入了两个不同的值。后一个值"translate(-150,-150)"将覆盖前一个值。

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

SVG transform属性接受一系列转换定义：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>

您可以在容器上看到两个转换操作。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>