SVG円の要素がスケール変換でジャンプする

Question

以下は、D3を使用して円を描き、マウスオーバーで拡大縮小するコードです。それは何をすべきかを行いますが、円の尺度を意味し、別の場所にジャンプ（翻訳）することを意味する別の場所に高さを取ります。私はそれの原因を察知することはできません。

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）の中心にあることです。これは左上隅です。このため、その位置（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>

EDIT：ゲッターを使用して、あなたはそれをハードコーディングせずに属性を変更することができます。例えば、円の半径を取得し、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>