我正在尝试创建一个简单的力图。图包含节点和链接，但不包含任何标签。我遇到了一个奇怪的问题，当我将一些节点组合到一个位置时，链接的长度会自动增加。节点是粘性的。当我将节点拖放到左上角时，其他非粘性节点会从右下移，链接的长度也会增加。 有什么方法可以设置链接的最大长度？代码如下。
还是有任何力量来控制这种行为？
//create somewhere to put the force directed graph
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
//d3 code goes here
//Characters
var nodes_data = [{
"name": "Lillian",
"sex": "F"
}, {
"name": "Gordon",
"sex": "M"
}, {
"name": "Sylvester",
"sex": "M"
}, {
"name": "Mary",
"sex": "F"
}, {
"name": "Helen",
"sex": "F"
}, {
"name": "Jamie",
"sex": "M"
}, {
"name": "Jessie",
"sex": "F"
}, {
"name": "Ashton",
"sex": "M"
}, {
"name": "Duncan",
"sex": "M"
}, {
"name": "Evette",
"sex": "F"
}, {
"name": "Mauer",
"sex": "M"
}, {
"name": "Fray",
"sex": "F"
}, {
"name": "Duke",
"sex": "M"
}, {
"name": "Baron",
"sex": "M"
}, {
"name": "Infante",
"sex": "M"
}, {
"name": "Percy",
"sex": "M"
}, {
"name": "Cynthia",
"sex": "F"
}]
//Relationships
//type: A for Ally, E for Enemy
var links_data = [{
"source": "Sylvester",
"target": "Gordon",
"type": "A"
}, {
"source": "Sylvester",
"target": "Lillian",
"type": "A"
}, {
"source": "Sylvester",
"target": "Mary",
"type": "A"
}, {
"source": "Sylvester",
"target": "Jamie",
"type": "A"
}, {
"source": "Sylvester",
"target": "Jessie",
"type": "A"
}, {
"source": "Sylvester",
"target": "Helen",
"type": "A"
}, {
"source": "Helen",
"target": "Gordon",
"type": "A"
}, {
"source": "Mary",
"target": "Lillian",
"type": "A"
}, {
"source": "Ashton",
"target": "Mary",
"type": "A"
}, {
"source": "Duncan",
"target": "Jamie",
"type": "A"
}, {
"source": "Gordon",
"target": "Jessie",
"type": "A"
}, {
"source": "Sylvester",
"target": "Fray",
"type": "E"
}, {
"source": "Fray",
"target": "Mauer",
"type": "A"
}, {
"source": "Fray",
"target": "Cynthia",
"type": "A"
}, {
"source": "Fray",
"target": "Percy",
"type": "A"
}, {
"source": "Percy",
"target": "Cynthia",
"type": "A"
}, {
"source": "Infante",
"target": "Duke",
"type": "A"
}, {
"source": "Duke",
"target": "Gordon",
"type": "A"
}, {
"source": "Duke",
"target": "Sylvester",
"type": "A"
}, {
"source": "Baron",
"target": "Duke",
"type": "A"
}, {
"source": "Baron",
"target": "Sylvester",
"type": "E"
}, {
"source": "Evette",
"target": "Sylvester",
"type": "E"
}, {
"source": "Cynthia",
"target": "Sylvester",
"type": "E"
}, {
"source": "Cynthia",
"target": "Jamie",
"type": "E"
}, {
"source": "Mauer",
"target": "Jessie",
"type": "E"
}]
//set up the simulation
//nodes only for now
var simulation = d3.forceSimulation()
.nodes(nodes_data);
//add forces
//we're going to add a charge to each node
//also going to add a centering force
simulation
.force("charge_force", d3.forceManyBody().strength([-400]))
.force("center_force", d3.forceCenter(width / 2, height / 2))
.on("tick", tickActions);
//draw lines for the links
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(links_data)
.enter().append("line")
.attr("stroke-width", 3)
.attr("stroke", linkColour);
function linkColour(d) {
if (d.type == "A") {
return "green";
} else {
return "red";
}
}
//draw circles for the nodes
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(nodes_data)
.enter()
.append("circle")
.attr("r", 15)
.attr("fill", circleColour);
function circleColour(d) {
if (d.sex == "M") {
return "blue";
} else {
return "pink";
}
}
//Create the link force
//We need the id accessor to use named sources and targets
var link_force = d3.forceLink(links_data)
.id(function(d) {
return d.name;
});
//Add a links force to the simulation
//Specify links in d3.forceLink argument
simulation.force("links", link_force);
// setup drag handler
var drag_handler = d3.drag()
.on("start", drag_start)
.on("drag", drag_drag)
.on("end", drag_end);
//same as using .call on the node variable as in https://bl.ocks.org/mbostock/4062045
drag_handler(node)
//drag handler
//d is the node
function drag_start(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function drag_drag(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
// // for non sticky behaviour
// function drag_end(d) {
// if (!d3.event.active) simulation.alphaTarget(0);
// d.fx = null;
// d.fy = null;
// }
// // for sticky behaviour
function drag_end(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = d.x;
d.fy = d.y;
}
// // Sticky nodes on x axis
// function drag_end(d) {
// if (!d3.event.active) simulation.alphaTarget(0);
// d.fx = d.x;
// d.fy = null;
// }
// // Sticky nodes on y axis
// function drag_end(d) {
// if (!d3.event.active) simulation.alphaTarget(0);
// d.fx = null;
// d.fy = d.y;
// }
// // Fixed node position on dragged
// function drag_end(d) {
// if (!d3.event.active) simulation.alphaTarget(0);
// d.fx = 300;
// d.fy = 200;
// }
// Invert node position on dragged
// function drag_end(d) {
// if (!d3.event.active) simulation.alphaTarget(0);
// d.fx = d.y;
// d.fy = d.x;
// }
function tickActions() {
//update circle positions to reflect node updates on each tick of the simulation
node
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
});
//update link positions
//simply tells one end of the line to follow one node around
//and the other end of the line to follow the other node around
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;
});
} .links line {
/* stroke: #999; */
stroke-opacity: 0.6;
}
.nodes circle {
stroke: #fff;
stroke-width: 1.5px;
}<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<h2>Draggable force graph with sticky nodes and other behaviours of node positioning</h2>
<svg width="960" height="600"></svg>