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）为中心，即左上角。因此，任何不在该位置（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>

编辑：使用getter，您可以更改属性而无需对其进行硬编码。例如，获取圆的半径并将其加倍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>

SVG Circle元素在缩放变换时跳转

1 个答案: