Question

我有基本的d3力布局，但是对于渲染边和节点我使用画布。我需要的是设置缩放行为。

当我实现缩放时，如下面的示例所示，缩放仅在d3布局动画停止后才起作用。当我拖动节点时，缩放也不起作用。

这是我的绘制方法，我称之为onTick事件：

             function drawCanvas() {

                context.clearRect(0, 0, width, height);

                edges.forEach(function (d) {
                    // Draw a line from source to target.
                    context.beginPath();
                    context.moveTo(d.source.x, d.source.y);
                    context.lineTo(d.target.x, d.target.y);
                    context.stroke();
                });

            }

我还注册了触发此方法的缩放事件：

            function onZoomChanged() {
                context.save();
                context.clearRect(0, 0, width, height);
                context.scale(d3.event.scale, d3.event.scale);
                context.translate(d3.event.translate[0], d3.event.translate[1]);
                drawCanvas();
                context.restore();


                container.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
            }

正如我所提到的，只有在布局停止且节点不移动时，缩放才有效。当布局仍在处理时，它可以让它一直工作吗？

请求帮助！

我在fiddle上创建了我的问题的基本示例。稍后缩放工作..

使用画布缩放D3力布局

0 个答案: