SVG Circle元素在比例转换时跳转

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