d3.js 人脉关系图实例

以下是一个使用d3.js创建简单人脉关系图的示例：

一、基础概念

数据结构
- 在人脉关系图中，通常使用节点（nodes）表示人，边（edges）表示人与人之间的关系。例如，可以使用JavaScript对象数组来表示节点和边的数据。
- 节点对象可能包含诸如id、name等属性，边对象可能包含source（源节点的id）、target（目标节点的id）等属性。

布局算法
- d3.js提供了多种布局算法用于确定节点的位置。对于人脉关系图，力导向布局（force - directed layout）比较常用。这种布局算法模拟物理系统中的力，节点之间相互吸引或排斥，从而形成一种相对美观且能体现关系的布局。

二、优势

可视化直观
- 能够清晰地展示复杂的人脉关系网络，让人一眼看出谁与谁有联系，联系的紧密程度（通过边的粗细、距离等方式可以表示）等。

交互性强
- 可以实现节点的点击、悬停显示详细信息等交互功能，方便用户探索人脉关系。

三、类型

简单关系图
- 只显示基本的连接关系，不包含太多额外的属性或可视化效果。

加权关系图
- 可以根据关系的强度等因素对边进行加权，例如通过边的粗细来表示联系的频繁程度。

四、应用场景

社交网络分析
- 在社交平台上分析用户的社交圈子，了解用户的社交影响力等。

企业组织架构展示
- 展示企业内部的人员关系和层级结构。

五、示例代码

以下是一个简单的d3.js人脉关系图示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial - scale = 1.0">
    <title>D3.js人脉关系图示例</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        .node {
            stroke: #fff;
            stroke - width: 1.5px;
        }

        .link {
            fill: none;
            stroke: #ccc;
            stroke - width: 1.5px;
        }
    </style>
</head>

<body>
    <script>
        // 数据定义
        const nodes = [
            { id: "Alice", group: 1 },
            { id: "Bob", group: 1 },
            { id: "Charlie", group: 2 },
            { id: "David", group: 2 }
        ];
        const links = [
            { source: "Alice", target: "Bob" },
            { source: "Bob", target: "Charlie" },
            { source: "Charlie", target: "David" },
            { source: "David", target: "Alice" }
        ];

        const width = 500;
        const height = 500;

        const svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);

        // 力导向布局
        const simulation = d3.forceSimulation(nodes)
            .force("link", d3.forceLink(links).id(d => d.id))
            .force("charge", d3.forceManyBody())
            .force("center", d3.forceCenter(width / 2, height / 2));

        // 绘制边
        const link = svg.append("g")
            .attr("class", "links")
            .selectAll("line")
            .data(links)
            .enter().append("line")
            .attr("class", "link");

        // 绘制节点
        const node = svg.append("g")
            .attr("class", "nodes")
            .selectAll("circle")
            .data(nodes)
            .enter().append("circle")
            .attr("class", "node")
            .attr("r", 10);

        // 添加标签
        const labels = svg.append("g")
            .attr("class", "labels")
            .selectAll("text")
            .data(nodes)
            .enter().append("text")
            .text(d => d.id);

        // 更新节点和边的位置
        simulation.on("tick", () => {
            link
                .attr("x1", d => d.source.x)
                .attr("y1", d => d.source.y)
                .attr("x2", d => d.target.x)
                .attr("y2", d => d.target.y);

            node
                .attr("cx", d => d.x)
                .attr("cy", d => d.y);

            labels
                .attr("x", d => d.x)
                .attr("y", d => d.y);
        });
    </script>
</body>

</html>

在这个示例中：