力导向图（Force-Directed Graph），是绘图的一种算法。在二维或三维空间里配置节点，节点之间用线连接，称为连线。
各连线的长度几乎相等，且尽可能不相交。节点和连线都被施加了力的作用，力是根据节点和连线的相对位置计算的。根据力的作用，来计算节点和连线的运动轨迹，并不断降低它们的能量，最终达到一种能量很低的安定状态。
力导向图.png
- 数据
var w = 500;
var h = 300;
//Original data
var dataset = {
nodes: [
{ name: "Adam" },
{ name: "Bob" },
{ name: "Carrie" },
{ name: "Donovan" },
{ name: "Edward" },
{ name: "Felicity" },
{ name: "George" },
{ name: "Hannah" },
{ name: "Iris" },
{ name: "Jerry" }
],
edges: [
{ source: 0, target: 1 },
{ source: 0, target: 2 },
{ source: 0, target: 3 },
{ source: 0, target: 4 },
{ source: 1, target: 5 },
{ source: 2, target: 5 },
{ source: 2, target: 5 },
{ source: 3, target: 4 },
{ source: 5, target: 8 },
{ source: 5, target: 9 },
{ source: 6, target: 7 },
{ source: 7, target: 8 },
{ source: 8, target: 9 }
]
};
//Initialize a simple force layout, using the nodes and edges in dataset
var force = d3.forceSimulation(dataset.nodes)
.force("charge", d3.forceManyBody())
.force("link", d3.forceLink(dataset.edges))
.force("center", d3.forceCenter().x(w / 2).y(h / 2));
console.log(`force`, force)
var colors = d3.scaleOrdinal(d3.schemeCategory10);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create edges as lines
var edges = svg.selectAll("line")
.data(dataset.edges)
.enter()
.append("line")
.style("stroke", "#ccc")
.style("stroke-width", 1);
//Create nodes as circles
var nodes = svg.selectAll("circle")
.data(dataset.nodes)
.enter()
.append("circle")
.attr("r", 10)
.style("fill", function (d, i) {
return colors(i);
})
.call(d3.drag() //Define what to do on drag events
.on("start", dragStarted)
.on("drag", dragging)
.on("end", dragEnded));
var sev_texts = svg.selectAll("text")
.data(dataset.nodes)
.enter()
.append("text")
.style("fill", "black")
.attr("x1", function (d) { return d.x; })
.attr("y1", function (d) { return d.y; })
.text(function (d) {
return d.name
})
//Add a simple tooltip
nodes.append("title")
.text(function (d) {
return d.name;
});
//Every time the simulation "ticks", this will be called
force.on("tick", function () {
edges.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; });
nodes.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; });
// D3 会计算这些 x/y 值，并将它们追加到原始数据集中既有的对象上
});
//Define drag event functions
function dragStarted(d) {
if (!d3.event.active) force.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragging(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragEnded(d) {
if (!d3.event.active) force.alphaTarget(0);
d.fx = null;
d.fy = null;
}
D3 不管你在这些对象中保存了什么数据。我们这里的结点（nodes）就是人名，而连线（edges）则包含两个值：来源（source）ID 和目标（target）ID。这些 ID 对应着上面的结点，比如 ID 为 3，表示Donovan。如果是 3 与 4 连 接，则表示 Donovan 与 Edward 连接。
对我们这个例子来说，只需要知道 D3 的力导向布局能像其他物理模拟系统一样 超越时间向前“打点”。每打一次点，力导向布局就会根据初始化布局时指定的数据，调整每个结点和连线的位置值。要亲眼看到这个过程，就得更新与之关联的元素——直线和圆形。
注意，每次刷新页面，这些圆形和直线都会焕发生机，即使相对平衡的状态每次也 不一样。之所以每次的静止状态都不一样，是因为存在一个随机元素，它决定了圆 点以什么方式进入场景。
