Question

我尝试将鱼眼效果应用于具有碰撞检测，节点拖动，缩放等功能的布局，但我正在努力将鱼眼镜头与我的嘀嗒功能集成。

我发现的最接近的现有示例是http://bl.ocks.org/bentwonk/2514276，但它并不真正包含自定义刻度函数或启用常规操作，例如在应用鱼眼时拖动节点。为了清楚起见，这里是我的滴答功能，无论鱼眼......

function tick(e) {
    link.attr("x1", function(d) { return d.source.x;})
        .attr("y1", function(d) { return d.source.y;})
        .attr("x2", function(d) { return d.target.x;})
        .attr("y2", function(d) { return d.target.y;})

    node.each(gravity(.2 * e.alpha))
        .each(collide(jitter)) 
        .attr("transform", function(d) { 
            return "translate(" + d.x + "," + d.y + ")";
        });
}

这就是我希望在我的svg听众身上使用以触发鱼眼......

svg.on("mousemove", function() {

    fisheye.focus(d3.mouse(this));

    node
        .each(function(d) { d.fisheye = fisheye(d); })
        .attr("cx", function(d) { return d.fisheye.x; })
        .attr("cy", function(d) { return d.fisheye.y; })
        .attr("r", function(d) { return d.fisheye.z * 8; });

    link.attr("x1", function(d) { return d.source.fisheye.x; })
        .attr("y1", function(d) { return d.source.fisheye.y; })
        .attr("x2", function(d) { return d.target.fisheye.x; })
        .attr("y2", function(d) { return d.target.fisheye.y; });
});

但是当我们同时使用它们时，我注意到没有鱼眼效果 - 大概是tick（）覆盖了我的svg监听器的任何变化（虽然即使我将force.stop（）添加到我的svg监听器，我仍然看不到页面上的鱼眼或任何控制台错误。）

当然，如果我替换tick功能，那么整个节点布局都不能正确计算以开始。

抱歉，我没有更具体的问题，但是有没有人想到最好的方法来结合这两种行为，以便我可以使用鱼眼效果而不影响其他力布局功能？

谢谢！

编辑：

到目前为止，我唯一想到的只是使用svg监听器来触发鼠标位置...

svg.on("mousemove", function() {
        //force.stop();
        fisheye.focus(d3.mouse(this));
});

然后在tick函数中添加某种坐标...

node.each(gravity(.2 * e.alpha))
            .each(collide(jitter)) 
            .each(function(d) { d.fisheye = fisheye(d); })
            .attr("r", function(d) { return d.fisheye.z * 8; })     
            .attr("transform", function(d) { 
                return "translate(" + d.x + d.fisheye.x + "," + d.y + d.fisheye.y + ")";
            });

（上面没有工作 - 只产生无效坐标，所有节点最终都在屏幕的左上角）

将d3的鱼眼插件与力布局勾选功能集成在一起

0 个答案: