甚至在拖动后也强制布局为每个节点设置固定的距离 [英] force layout set fixed distance each nodes even after dragging
本文介绍了甚至在拖动后也强制布局为每个节点设置固定的距离的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经搜索过但没有实现，是否有可能在创建每个节点时即使拖动后每个节点也应有固定的距离.
I have searched but did not achieve this, is it possible that when every nodes are created there should be fixed distance of each node even after dragging.
请检查此代码
var width = 1280,
height = 800
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var force = d3.layout.force()
.gravity(1)
.linkDistance (800)
.charge(-100)
.size([width, height]);
var datajson = {
"nodes" : [ {"name" : "a", "group" : 2,'x' : 200,'y' : 300} , {"name" : "b", "group" : 1,'x' : 200,'y' : 300}, { "name" : "c", "group" : 1 ,'x' : 200,'y' : 300}, {"name" : "d", "group" : 2,'x' : 200,'y' : 300} ],
"links" : [{"source": 0 ,"target" : 1 , "value" : 1},{"source": 0 ,"target" : 3 , "value" : 2},{"source": 2 ,"target" : 3 , "value" : 3},
{"source": 1 ,"target" : 1 , "value" : 4},{"source": 2 ,"target" : 1 , "value" : 5,"distance":3},{"source": 0 ,"target" : 2 , "value" : 5,"distance":30},{"source": 1 ,"target" : 3 , "value" : 5, 'class': 'red',"distance":30}
]
}
force
.nodes(datajson.nodes)
.links(datajson.links)
.start();
var link = svg.selectAll(".link")
.data(datajson.links)
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(datajson.nodes)
.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append("image")
.attr("x", -8)
.attr("y", -8)
.attr("width", 45)
.attr("height", 45)
.attr("xlink:href", function(d) {
var rnd = Math.floor(Math.random() * 64 + 1);
var imagePath =
"http://www.bigbiz.com/bigbiz/icons/ultimate/Comic/Comic"
+ rnd.toString() + ".gif";
return imagePath;
});
node.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });
force.on("tick", function() {
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.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
推荐答案
我能够将每个节点固定到其初始位置.这是有效的示例，但这里缺少尚未实现的弹跳效果.
I am able to fixed to each node to its initial position. Here is working example but here missing the bouncing effect that is not achieved yet.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.link {
stroke: #dfdfdf;
}
.node text {
pointer-events: none;
font: 10px sans-serif;
}
.link.red {
stroke: blue;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 1280,
height = 800
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var force = d3.layout.force()
.gravity(0.15)
.linkDistance (400)
.charge(-100)
.size([width, height]);
var node_psoition = [{"x":65, "y":43},{"x":665, "y":43},{"x":465, "y":343},{"x":65, "y":343}]
var datajson = {
"nodes" : [ {"id":1,"name" : "a", "group" : 2, "x":65, "y":43 , "fixed":"TRUE"} , {"id":2,"name" : "b", "group" : 1,"x":665, "y":43, "fixed":"TRUE"}, { "id":3,"name" : "c", "group" : 1, "x":465, "y":343, "fixed":"TRUE" }, {"id":4,"name" : "d", "group" : 2,"x":65, "y":343, "fixed":"TRUE"} ],
"links" : [{"source": 0 ,"target" : 1 , "value" : 1},{"source": 0 ,"target" : 3 , "value" : 1},{"source": 2 ,"target" : 3 , "value" : 1},
{"source": 2 ,"target" : 1 , "value" : 1}
]
}
force
.nodes(datajson.nodes)
.links(datajson.links)
.start();
var drag = force.drag()
.on("dragend", dragend);
var link = svg.selectAll(".link")
.data(datajson.links)
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(datajson.nodes)
.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append("image")
.attr("x", -8)
.attr("y", -8)
.attr("width", 45)
.attr("height", 45)
.attr("xlink:href", function(d) {
var rnd = Math.floor(Math.random() * 64 + 1);
var imagePath =
"http://www.bigbiz.com/bigbiz/icons/ultimate/Comic/Comic"
+ rnd.toString() + ".gif";
return imagePath;
});
node.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });
force.on("tick", function() {
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.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
function dragend(d) {
force.stop();
position = (d.id - 1);
temp_x = node_psoition[position].x;
temp_y = node_psoition[position].y;
d.x = d.px = temp_x;
d.y = d.py = temp_y;
d.fixed = true;
force.start();
}
</script>
这篇关于甚至在拖动后也强制布局为每个节点设置固定的距离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
