在 bounded force 布局 d3 中拖动和缩放

Question

我想在绑定中拖动和缩放力布局。请检查此 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));
 });

但是没有成功。

Answer 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 中所做的更改，因为我已经做了很多。但似乎一切正常。

已更新 fiddle：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/

Answer 2

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

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

在 bounded force 布局 d3 中拖动和缩放

Dragging and zooming in the bounded force layout d3

javascript

svg

d3.js