SVG圓形元素按比例變換跳轉

Question

下面是使用D3在鼠標懸停上使用圓形和縮放它的代碼。它做它應該做的事情，但也將cricle帶到別的地方，這意味着圈子尺度和跳轉（翻譯）到其他位置。我無法理解它的原因。

this.node = this.chartLayer.append("g") 
     .attr("class", "nodes") 
     .selectAll("circle") 
     .data(data.nodes) 
     .enter().append("circle") 
     .attr("r", 10) 
     .attr("fill", (d) => { return this.colors(d.group); }) 
     .on('mouseover', function(d) { 
      d3.select(this).attr('transform', 'scale(' + 2 + ')'); 
     }) 

Answer 1

這與D3（無論是v3還是v4）無關。這裏的問題是，scale居中在SVG的起點（0,0）處，即SVG的左上角。因此，任何不在該位置（0,0）的元素似乎都會移動。

看一看這（將鼠標懸停在圈子）：

var circle = d3.select("circle"); 
 
circle.on('mouseover', function(d) { 
 
    d3.select(this).attr('transform', 'scale(' + 2 + ')'); 
 
})

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg> 
 
\t <circle cx="150" cy="75" r="20" fill="teal"></circle> 
 
</svg>

解決方案：翻譯規模之前的元素原點：

var circle = d3.select("circle"); 
 
circle.on('mouseover', function(d) { 
 
    d3.select(this).attr('transform', 'translate(-150,-75) scale(' + 2 + ')'); 
 
})

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg> 
 
\t <circle cx="150" cy="75" r="20" fill="teal"></circle> 
 
</svg>

D3解決方案（更好的方式）：只需改變圓的半徑：

var circle = d3.select("circle"); 
 
circle.on('mouseover', function(d) { 
 
    d3.select(this).attr('r', 40); 
 
})

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg> 
 
\t <circle cx="150" cy="75" r="20" fill="teal"></circle> 
 
</svg>

編輯：使用干將，你可以改變屬性沒有硬編碼。例如，得到了圓的半徑和它mouseover加倍，然後除以一半mouseout：

var circle = d3.select("circle"); 
 
circle.on('mouseover', function(d) { 
 
    var r = d3.select(this).attr('r') 
 
    d3.select(this).attr('r', r*2); 
 
}).on('mouseout', function(d) { 
 
    var r = d3.select(this).attr('r') 
 
    d3.select(this).attr('r', r/2); 
 
});

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg> 
 
\t <circle cx="150" cy="75" r="20" fill="teal"></circle> 
 
</svg>