d3.js——绘制力学图

最新推荐文章于 2024-07-16 14:24:12 发布

AryaoO

最新推荐文章于 2024-07-16 14:24:12 发布

阅读量3.8k

点赞数 2

分类专栏：前端开发——D3 前端开发基础文章标签： d3.js 力学图 layout.force force.drag tick

本文链接：https://blog.csdn.net/Selina_Chan/article/details/51248130

版权

本文介绍了如何使用d3.js库来绘制力学图，包括确定数据源、设置定点和边，绘制圆形节点和线条，以及实现动态刷新效果。

摘要由CSDN通过智能技术生成

绘制力学图总结为如下步骤：

一、确定数据源：

绘制力学图，你需要知道定点和边，如下：

var nodes = [
    {name:"GuiLin"},
    {name:"GuangZhou"},
    {name:"XiaMen"},
    {name:"HangZhou"},
    {name:"ShangHai"},
    {name:"QingDao"},
    {name:"TianJin"},
    {name:"BeiJing"},
    {name:"ChangChun"},
    {name:"XiAn"},
    {name:"WuLuMuQi"},
    {name:"LaSa"},
    {name:"ChengDu"}];
var edges = [
    {source:0,target: 1 },
    {source:1,target: 2 },
    {source:3,target: 4 } ,
    {source:4,target: 5 } ,
    {source:5,target: 6 } ,
    {source:6,target: 7 } ,
    {source:7,target: 8 } ,
    {source:8,target: 9 } ,
    {source:9,target:10 } ,
    {source:10,target:11} ,
    {source:11,target:12} ,
    {source:12,target: 0} ];

二、使用d3.layout.force()函数进行数据的转换：