Элемент SVG Circle прыгает при преобразовании масштаба

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 центрируется в начале координат (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 Solution (способ лучше): просто изменить радиус окружности:

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>