在有界力布局d3中拖动和缩放[重复]答案

【问题标题】：Dragging and zooming in the bounded force layout d3 [duplicate]在有界力布局d3中拖动和缩放[重复]
【发布时间】：2015-04-07 06:45:29
【问题描述】：

我想在绑定中拖动和缩放力布局。请检查此link 这里节点在布局中居中，但我如何在边界内拖动。我什至尝试过这样的事情

nodes.attr("cx", function(d) {
     return d.x = Math.max(60, Math.min($(window).width() - 60, d.x));
 })
 .attr("cy", function(d) {
     return d.y = Math.max(60, Math.min($(window).height() - 60, d.y));
 });

但它不起作用。

【问题讨论】：

标签： javascript svg d3.js

【解决方案1】：

完成：

node.attr("transform", function(d) {
        //Here i create a node radius so it doesnt go offscreen
        var nodeRadius = d.weight * 2 + 12

        //here I do checks to see if it goes offscreen
        if(d.x<= nodeRadius){
           d.x = nodeRadius;
           }
        if(d.y<= nodeRadius){
           d.y = nodeRadius;
           }7
        if(d.x>width - nodeRadius){
           d.x = width - nodeRadius;
           }
        if(d.y>height - nodeRadius){
           d.y = height - nodeRadius;
           }

        return "translate(" + d.x + "," + d.y + ")";

    });

这是在tick function 中完成的，因此它会检查每一帧。我创建了一个实际的刻度函数，所以它是可重用的。请检查我在您的 JSFiddle 中所做的更改，因为我已经做了很多。但一切似乎都很好。

更新小提琴：http://jsfiddle.net/aVhd8/177/

如果您想在节点开始之前移动节点，那么边界必须记住该移动：

node.attr("transform", function(d) {
        //Here i create a node radius so it doesnt go offscreen
        var nodeRadius = d.weight * 2 + 12

        //here I do checks to see if it goes offscreen
        if(d.x<= nodeRadius-movement){ //have to take movement away as you have moved the nodes/links previously
           d.x = nodeRadius-movement;
           }
        if(d.y<= nodeRadius){
           d.y = nodeRadius;
           }
        if(d.x>width - nodeRadius-movement){
           d.x = width - nodeRadius-movement;
           }
        if(d.y>height - nodeRadius){
           d.y = height - nodeRadius;
           }

        return "translate(" + d.x + "," + d.y + ")";

    });

请注意，我已将movement 考虑在内。您还需要对链接执行相同操作：

JSFiddle : http://jsfiddle.net/aVhd8/180/

【讨论】：

嗨，AJ，你是天才 :) 。但是当我将节点放在中心时会发生什么。希望你记得给定的链接---jsfiddle.net/fekkyDev/aVhd8/174
完成，您需要做的就是将运动变量考虑在内。我不能强调你需要了解你的代码在做什么的事实。我注意到您一直在这里提出问题，如果您考虑一下逻辑在做什么，这些问题是相当简单的。例如，您想在开始时移动节点？所以你输入了一个翻译功能。但是您的刻度函数中的边界从节点不考虑先前翻译的那一点开始起作用。希望这会有所帮助:)
对不起，我刚刚重读了这个问题。@Rouby 只需取消注释 SVG 上的缩放调用，然后您就可以缩放/平移。但是，问题在于，当您平移时，您会更改力布局的视图，因此当您移动 SVG 时，在刻度函数中创建的边界会关闭。您可以通过在调用缩放时缩放而不是缩放和平移来解决这个问题。另一个问题是规模不会在您的范围内发挥作用：jsfiddle.net/aVhd8/182。或者，如果您想使用平移 + 缩放，则必须使用比例 + 平移值调整边界
嘿，AJ，你又做了一次。谢谢你:)

【解决方案2】：

看看这个：http://bl.ocks.org/mbostock/6123708

在该示例中，Mike 实现了缩放行为以及拖放行为。

【讨论】：