1
我使用強制佈局算法繪製圖形。但我希望用戶能夠禁用強制佈局算法並能夠移動節點。我遵循示例here（P是用於固定）作爲基礎來構建我的代碼。在d3中禁用強制佈局算法中的力
但是，我希望用戶欣賞基於力的算法的美妙之處，因此只有在用戶按下「Make draggable」按鈕後才能啓用拖動和固定功能。
這裏是我使用的代碼...
<!DOCTYPE html>
<html lang="en">
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
<head>
<meta charset="UTF-8">
<title>Spatial Social Network</title>
<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
<h1>The network</h1>
<script>
var width = 500,
height = 500;
var color = d3.scale.category20();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
/*Drag and pin*/
var node_drag = d3.behavior.drag()
.on("dragstart", dragstart)
.on("drag", dragmove)
.on("dragend", dragend);
function dragstart(d, i) {
alert("I am here");
force.stop() // stops the force auto positioning before you start dragging
}
function dragmove(d, i) {
d.px += d3.event.dx;
d.py += d3.event.dy;
d.x += d3.event.dx;
d.y += d3.event.dy;
}
function dragend(d, i) {
d.fixed = true; // of course set the node to fixed so the force doesn't include the node in its auto positioning stuff
force.resume();
}
function releasenode(d) {
d.fixed = false; // of course set the node to fixed so the force doesn't include the node in its auto positioning stuff
//force.resume();
}
/*Drag and pin*/
svg.append('text')
.attr("x", 2)
.attr("y", 20)
.text("Force Layout")
.attr("font-family", "sans-serif")
.attr("font-size", "20px")
.attr("fill", "red");
d3.json("jsonGraph.json", function(error, graph) {
if (error) throw error;
//console.log(graph.nodes);
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) { return color(d.class); })
.call(force.drag);
node.append("title")
.text(function(d) { return d.id; });
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("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
});
function MakeDraggable()
{
alert("here");
d3.json("jsonGraph.json", function(error, graph) {
if (error) throw error;
force
.nodes(null)
.links(null)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) { return color(d.class); })
//.call(force.drag);
.call(node_drag)
.on('dblclick', releasenode);
//force.stop();
});
}
</script>
<input type="button" name="MakeDraggable" value="Make Draggable!" onClick="MakeDraggable()"></input>
</body>
</html>
遺憾的是，似乎沒有要在行爲上的任何變化，即使按下按鈕後，「讓可拖動的！」。
這裏是我用來閱讀圖表JSON文件：
{
"directed": false,
"graph": {
"name": "Fun Graph"
},
"nodes": [
{
"class": "A",
"id": "A"
},
{
"class": "B",
"id": "C"
},
{
"class": "B",
"id": "B"
},
{
"class": "B",
"id": "E"
},
{
"class": "B",
"id": "D"
},
{
"class": "A",
"id": "G"
},
{
"class": "B",
"id": "F"
},
{
"class": "A",
"id": "I"
},
{
"class": "B",
"id": "H"
},
{
"class": "A",
"id": "K"
},
{
"class": "B",
"id": "J"
},
{
"class": "B",
"id": "M"
},
{
"class": "A",
"id": "L"
},
{
"class": "A",
"id": "O"
},
{
"class": "A",
"id": "N"
}
],
"links": [
{
"source": 0,
"target": 8
},
{
"source": 0,
"target": 9
},
{
"source": 0,
"target": 2
},
{
"source": 0,
"target": 11
},
{
"source": 0,
"target": 4
},
{
"source": 1,
"target": 7
},
{
"source": 1,
"target": 11
},
{
"source": 2,
"target": 11
},
{
"source": 2,
"target": 12
},
{
"source": 3,
"target": 4
},
{
"source": 3,
"target": 5
},
{
"source": 3,
"target": 6
},
{
"source": 4,
"target": 7
},
{
"source": 4,
"target": 11
},
{
"source": 4,
"target": 12
},
{
"source": 5,
"target": 7
},
{
"source": 5,
"target": 8
},
{
"source": 6,
"target": 11
},
{
"source": 6,
"target": 12
},
{
"source": 7,
"target": 13
},
{
"source": 7,
"target": 8
},
{
"source": 9,
"target": 14
},
{
"source": 10,
"target": 11
},
{
"source": 10,
"target": 14
},
{
"source": 12,
"target": 13
}
],
"multigraph": false
}
我是新來D3和不知道在哪裏，我錯了。
[1]: http://www.coppelia.io/2014/07/an-a-to-z-of-extra-features-for-the-d3-force-layout/