Question

我想在界限中拖动和缩放力布局。请检查link 这里Node在布局中居中，但是如何在边界内拖动。我甚至试过这样的事情

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中的更改，因为我做了很多。但一切似乎都很好。

更新了小提琴：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实施了缩放行为以及拖放行为。

拖动和缩放有界力布局d3

2 个答案: