SVG圆形元素在缩放变换时跳跃 [英] SVG Circle element jumps upon scale transform

问题描述

下面是使用D3在鼠标悬停时使用圆形和缩放的代码。它做它应该做，但也需要cricle到别的地方，意味着圆规模和跳跃（翻译）到一些其他位置。我不能理解其原因。

  this.node = this.chartLayer.append（g）
 .attr（class，nodes）
 .selectAll（circle）
 .data（data.nodes）
 .enter $ b .attr（r，10）
 .attr（fill，（d）=> {return this.colors（d.group）;}）
 .on '，function（d）{
 d3.select（this）.attr（'transform'，'scale（'+ 2 +'）'）; 
}）
  

解决方案

这与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> < circle cx =150cy =75r =20fill =teal>< / circle>< / svg>   

解决方案：在缩放之前将元素翻译为原文：

  var circle = d3.select（circle）; circle.on（'mouseover'，function {d3.select（this）.attr（'transform'，'translate（-150，-75）scale（'+ 2 +'）'）;}） 

 < script src =https://d3js.org/d3.v4.min.js> / script>< svg> < circle cx =150cy =75r =20fill =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> < circle cx =150cy =75r =20fill =teal>< / circle>< / svg>   

EDIT ：使用getter，您可以更改属性而不对其进行硬编码。例如，获取圆的半径，并在 mouseover 上将其加倍并在 mouseout 上将其除以一半：

  var circle = d3.select（circle）; circle.on鼠标悬停'，函数（d）{var r = d3.select（this）.attr（'r'）d3.select（this）.attr（'r'，r * 2）;} ，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> < circle cx =150cy =75r =20fill =teal>< / circle>< / svg>   

Below is the code to have a circle and scale it on mouseover using D3. It does what it is supposed to do but also takes cricle to somewhere else, meaning circle scales and jumps(translates) to some other location. I cannot apprehend the cause for it.

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 + ')');
        })

解决方案

This has nothing to do with D3 (be it v3 or v4). The problem here is that scale is centered at the origin (0,0) of the SVG, which is the top left corner. Because of this, any element that is not on that position (0,0) will seem to move.

Have a look at this (hover over the circle):

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>
	<circle cx="150" cy="75" r="20" fill="teal"></circle>
</svg>

Solution: translate the element to the origin before the scale:

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>
	<circle cx="150" cy="75" r="20" fill="teal"></circle>
</svg>

D3 Solution (way better): simply change the radius of the circle:

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>
	<circle cx="150" cy="75" r="20" fill="teal"></circle>
</svg>

EDIT: Using getters, you can change the attribute without hardcoding it. For instance, getting the radius of the circle and doubling it on mouseover and dividing it by half on 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>
	<circle cx="150" cy="75" r="20" fill="teal"></circle>
</svg>

这篇关于SVG圆形元素在缩放变换时跳跃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！