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元素没有x和y属性。您可以在 SVG 规范中找到此类信息：http: //www.w3.org/TR/SVG/struct.html#GElement

您可以使用以下方法移动g元素：http translate transform: //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>
于 2012-11-07T21:46:46.363 回答