Question

我试图在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 + ')');

        })

        )

Answer 1

当你做2的比例时。

如果cx为50且cy为50，那么在比例2上，圆圈将出现在中心cx * scale = 100和cy * scale = 100。

这就是为什么它会按比例跳跃的原因。现在，如果你想让圆圈在同一个地方，你需要做这样的事情：

d3.select(this).select("circle").attr("cx", 50/scale)
d3.select(this).select("circle").attr("cy", 50/scale)

除以比例，这将中和圆心的比例效果。

所以后期缩放新的cx和cy将是25。

工作代码here。

D3转换比例并保持位置不变

1 个答案: