11-D3.js力导向图

力导向图（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 的力导向布局能像其他物理模拟系统一样 超越时间向前“打点”。每打一次点，力导向布局就会根据初始化布局时指定的数据，调整每个结点和连线的位置值。要亲眼看到这个过程，就得更新与之关联的元素——直线和圆形。

注意，每次刷新页面，这些圆形和直线都会焕发生机，即使相对平衡的状态每次也 不一样。之所以每次的静止状态都不一样，是因为存在一个随机元素，它决定了圆 点以什么方式进入场景。