Question

我已经在svg：image上成功使用过Arc.Centroid。但是，当我尝试使用带有svg.symbol的质心时，attr X＆amp; 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");

据我所知，这应该有效。我还应用了另一个变换attr，例如

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

您可以使用g translate移动transform元素：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转换属性接受转换定义列表：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>

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

1 个答案: