【D3.js实战】Force Simulation 力导图制作

Force Simulation 力导图实战 @ D3.js

数据结构

做力导图使用到的数据为json数据，一般采用json数据来表达图结构。本次实验选用的json数据数据结构如下（图片中为经过了力模拟后的）：

• links至少要由target, source组成
  • 这连个属性标记了起始node和终止node，其值通
    常为node的id。
• node由group和id构成
  • group表示node属于哪一类（方便着色）
  • id是node的唯一标识符

思路分析

• 画布初始化，全局变量定义
• 数据读取
• 力模拟
• 数据绑定 datajoin
  • 结点node（ 和 ）
  • 连边link
• simulation.on("tick",tick)，tick函数编写
• drag 拖曳交互设计

画布初始化，全局变量定义

这步比较基础，直接贴上代码

const svg = d3.select('svg')
const height = +(svg.attr('height'))
const width = +(svg.attr('width'))
const margin = {
   
   
    top:150,
    left:50,
    right:50,
    bottom:0
}

const innerHeight = height-margin.top-margin.bottom;
const innerWidth = width - margin.left - margin.right;
var color = d3.scaleOrdinal(d3.schemeCategory10);
let link;
let nodes;
let simulation;
const render_init = function(){
   
   
    svg.append("text")
        .attr('class', 'title')
        .attr('font-size','2em')
        .attr('x',margin.left)
        .attr('y', margin.top/2)
        .attr('transform',`translate(0,-40)` )
        .attr('font-weight', 'bold')
        .attr('fill','blue' )
        .html("Force  Simulation")

    svg.append("g")
        .attr('id', 'maingroup')
        .attr('x', margin.left)
        .attr('y', margin.top)
        .attr('transform', `translate(${
     
     margin.left},${
     
     margin.top})`)
        .attr('width',innerWidth )
        .attr('height',innerHeight )
}

数据读取

通常读取进来的数据要进行预处理，但是图数据有些不同。通常我们拿到的数据都是不符合d3力导图数据结构要求的。一般用python等语言写的脚本文件进行数据预处理整理成符合要求的数据结构。

d3.json('./data/miserables.json').then(data => {
   
   
    render_init();//画布初始化
    //force simulation 力模拟
    //data join 数据绑定
    //drag  交互事件
})

力模拟

有两点需要注意的地方：

• forceLink这里要处理一下，绑定node.id。不然会按照node的索引来进行，这样设置tick的时候会非常不方便
• 仅进行力模拟结点的位置不会进行实时更新，必须要有simulation.on(tick)才会把力模拟的结果反映到图元上

simulation = d3.forceSimulation()
    .nodes(data.nodes)
    .force("link",d3.forceLink(data.links).id(d => d.id))