Javascript 使用弧形心定位形状，但由于某些原因X&；你不影响它

我已经在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)") 

但我相信它不会从弧的中心平移形状。。这是我的小提琴-

---

元素

g

没有

x

和

y

属性。您可以在SVG规范中找到此类信息：

您可以使用

translate

变换来移动
g
元素：

例如，
text
元素确实具有
x
和
y
属性：

在上一个代码段中，将两个不同的值写入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变换属性接受变换定义列表：

所以最后一段代码应该写成：

 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>

你好

您可以在容器上看到两个translate操作

另一个选项是将路径和文本分组到另一个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>

你好

我只是想用质心来定位形状。例如，如果我移动整个圆弧，形状的位置将保持不变，就像svg:image一样