[英]Create bend points in links with drag and drop using D3 or javascript
[英]D3 drag + links not moving
我在力導向圖中有一系列節點和鏈接,並且節點能夠很好地拖動並返回到其起始位置,但鏈接不會跟隨它們。 我以為刻度功能會自動更新每個鏈接的末端...我在這里玩弄小提琴
到目前為止,我的兩個主要問題是a。)鏈接為什么不跟隨節點,以及如何使之跟隨... b。)當我在小提琴或瀏覽器上運行腳本時,我已經注意到在我拖拽節點之前是一個奇怪的延遲,為什么會這樣,如何解決呢?
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.Chip{
fill: red;
/*stroke: black;*/
stroke-width: 2px;
}
.Abstraction{
fill: blue;
/*stroke: black;*/
stroke-width: 2px;
}
.Properties{
fill: green;
stroke: black;
stroke-width: 2px;
}
.link{
stroke: #777;
stroke-width: 2px;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var width = 960, height = 500, colors = d3.scale.category10();
var svg = null, force = null;
var circle = null, path = null;
var nodes = null, links = null;
var nodesArray = null, linkArray = null;
var count = 0;
var element = "body"; var numEdges = 4, numNodes = 5;
var i = 0; var L = 16, r = 12, lineLimit = 10;
var d = 2 * r + L;
var R = (count - 1) * d;
var m = width / 2;
var X;
var drag = d3.behavior.drag()
.on('dragstart', dragstart)
.on('drag', drag)
.on('dragend', dragend);
svg = d3.selectAll(element).append('svg').attr('width', width).attr('height', height);
nodes = d3.range(numNodes).map(function () {
X = m - (R / 2) + (i * d);
++i;
return {
x: X,
y: (height) / 3,
fx: X,
fy: height / 3,
id: i-1,
reflexive: true
};
});
for (var i = 0; i < numNodes; ++i) {
d3.select(element).append("h3").text("Node " + i + ": " + nodes[i].id);
}
i = -1;
links = d3.range(numEdges).map(function () {
i++;
return {
//
source: nodes[i],
target: nodes[i+1],
left: false,
right: true
}
});
for (var i = 0; i < numEdges; ++i) {
d3.select(element).append("h3").text("Source: " + links[i].source.id + " Target: " + links[i].target.id);
}
force = d3.layout.force().size([width, height]).nodes(nodes).links(links).linkDistance(40).linkStrength(0.1).charge(-300);
linkArray = svg.selectAll('.link').data(links).enter().append('line').attr('class', 'link')
.attr('x1', function (d) {
return nodes[d.source.id].x;
})
.attr('y1', function (d) { return nodes[d.source.id].y; })
.attr('x2', function (d) { return nodes[d.target.id].x; })
.attr('y2', function (d) { return nodes[d.target.id].y; });
nodeArray = svg.selectAll("circle").data(nodes).enter().append('circle').attr('class', "Properties").attr('r', 12)
.attr('cx', function (d) { return d.x })
.attr('cy', function (d) { return d.y })
.style('cursor', 'pointer').call(drag);
force.on('tick', tick);
force.start();
function dragmove(d) {
d3.select(this)
.attr("cx", d.x = Math.max(radius, Math.min(width - radius, d3.event.x)))
.attr("cy", d.y = Math.max(radius, Math.min(height - radius, d3.event.y)));
}
var originalPosition = [];
function dragstart(d) {
originalPosition[0] = d.x;
originalPosition[1] = d.y;
console.log("Start: ", originalPosition[0], originalPosition[1]);
}
function drag() {
var m = d3.mouse(this);
d3.select(this)
.attr('cx', m[0])
.attr('cy', m[1]);
}
function dragend(d) {
console.log("End: ", d.x, d.y);
d3.select(this).transition().attr('cx', originalPosition[0]).attr('cy', originalPosition[1]);
}
function tick() {
nodeArray
.attr('cx', function (d) { return d.x; })
.attr('cy', function (d) { return d.y; });
console.log("ticking");
linkArray
.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; });
}
</script>
我知道這太遲了,但也許會對其他人有所幫助。
基本上,您是在dragstart上設置節點位置,而不是在鏈接上設置。 因此,在設置節點位置時,只需調用tick函數即可移動鏈接。
這是您更新的拖動功能:
function dragstart(d, i) {
force.stop() // stops the force auto positioning before you start dragging
originalPosition[0] = d.x;
originalPosition[1] = d.y;
}
function dragmove(d, i) {
d.px += d3.event.dx;
d.py += d3.event.dy;
d.x += d3.event.dx;
d.y += d3.event.dy;
tick();
}
function dragend(d, i) {
d.x = originalPosition[0];
d.y = originalPosition[1];
d3.select(this).transition().attr('cx', originalPosition[0]).attr('cy', originalPosition[1]);
tick();
}
還要注意這些函數的名稱。 您有一個變量'drag',但您也有一個函數'drag',所以我不知道它實際如何工作而不拋出錯誤。
更新的小提琴: https : //jsfiddle.net/g9g9xe6k/6/
有點遲了,但希望對您有所幫助:)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.