下面是使用 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 + ')');
})
这与 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>
Solution:将元素平移到比例之前的原点:
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>
EDIT:使用 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)