2
我想拖动d3中的一组元素,但是当鼠标放在操作符上时,我还需要缩放组。D3转换比例并保持位置不变
当我缩放组时,它会改变它的位置,是否可以缩放它,而它的位置在svg中是不变的?我的工作是fiddle。
<svg width="400" height="400" style="background-color: red">
<g id="op" class="operator">
<circle cx="50" cy="50" r="20" style="fill: yellow"></circle>
</g>
</svg>
的script.js
d3.selectAll('.operator')
.on('mouseenter', function() {
console.log('Mouse Enter');
d3.select(this).attr('transform', 'scale(2)');
})
.on('mouseleave', function() {
console.log('Mouse Leave');
})
.call(d3.behavior.drag()
.on('drag', function() {
d3.select(this).attr('transform', 'translate(' + d3.event.x + ',' + d3.event.y + ')');
})
)
那么,我的实际实施有组内的几个圈子。我应该为所有元素设置中心吗? – Fawzan
如果您将鼠标悬停在圆上,那么您将不得不重置cx和cy,使其保持在相同的位置。 – Cyril
指出。但我仍然在寻找一个简单的解决方案。 :D – Fawzan