D3系列第三弹——绘制力导向图

最新推荐文章于 2024-01-28 11:15:00 发布

原创

最新推荐文章于 2024-01-28 11:15:00 发布 · 1.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#d3 #html #可视化

本文介绍了如何使用D3.js绘制力导向图，这种图表常用于复杂网络的可视化，通过点和线展示节点间的亲疏关系。文章包含JSON数据集的解释、HTML及JS文件的程序示例，以及最终的图表效果图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于力导向图，学习之前要知道，力导向图是什么，它的特点是什么。

力引导算法主要应用与复杂网络可视化。将对象抽象成图中的点，有关系的两点间绘制一条线，从力导向图，我们可以明显的知道点之间的亲疏关系。

使用数据集json文件：

{
  "nodes": [
    { "name": "桂林" }, { "name": "广州" },
    { "name": "厦门" }, { "name": "杭州" },
    { "name": "上海" }, { "name": "青岛" },
    { "name": "天津" }, { "name": "昆明" },
    { "name": "大理" }, { "name": "沈阳" },
    { "name": "成都" }, { "name": "包头" },
    { "name": "宜宾" }, { "name": "眉山" },
    { "name": "绵阳" }, { "name": "乐山" }
  ],
  "links": [
    { "source" : 0 , "target": 1 } , { "source" : 0 , "target": 2 } ,
    { "source" : 0 , "target": 3 } , { "source" : 1 , "target": 4 } ,
    { "source" : 1 , "target": 5 } , { "source" : 9 , "target": 11 },
    { "source" : 1 , "target": 2 } , { "source" : 7 , "target": 6 },
    { "source" : 1 , "target": 5 } , { "source" : 4 , "target": 6 },
    { "source" : 1 , "target": 8 } , { "source" : 3 , "target": 5 },
    { "source" : 2 , "target": 5 } , { "source" : 6 ,