【D3.js数据可视化系列教程】（二十四）--力导向图

最新推荐文章于 2024-06-15 11:03:10 发布

司机大傻

最新推荐文章于 2024-06-15 11:03:10 发布

阅读量1.4w

点赞数 5

分类专栏：数据可视化 D3数据可视化系列教程文章标签： d3 d3.js d3js

本文链接：https://blog.csdn.net/tianxuzhang/article/details/14106937

版权

数据可视化同时被 2 个专栏收录

44 篇文章 48 订阅

订阅专栏

D3数据可视化系列教程

36 篇文章 205 订阅

订阅专栏

力导向图（可拖动）

1. 数据格式

定义节点和连接对象数组。

【司机提示】

nodes和edges是必备的两个属性。
nodes中的数据是一个表示节点的对象数组；
edges是一个表示边的对象数组，其中source和target子属性是必备的，其值代表了nodes数组中的索引。
节点和边数组都可以有额外的属性。

var dataset={
    nodes:[//节点
      { name:"Adam"},
      { name:"Bob"},
      { name:"Carride"},
      { name:"Donovan"},
      { name:"Edward"},
      { name:"Felicity"},
      { name:"George"},
      { name:"Hannah"},
      { name:"Iris"},
      { name:"Jerry"} 
    ],
    edges:[//边
      { source:0,target:1,weight:1,color:1},
      { source:0,target:2,weight:3,color:4},
      { source:0,target:3,weight:4,color:6},
      { source:0,target:4,weight:6,color:65},
      { source:1,target:5,weight:3,color:76},
      { source:2,target:5,weight:8,color:879},
      { source:2,target:5,weight:7,color:989},
      { source:3,target:4,weight:9,color:643},
      { source:5,target:8,weight:1,color:54},
      { source:5,target:9,weight:3,color:54}, 
      { source:6,target:7,weight:4,color:45},
      { source:7,target:8,weight:0,color:43},
      { source:2,target:8,weight:8,color:243},
      { source:3,target:8,weight:1,color:43},
      { source:5,target:8,weight:5,color:13},
      { source:6,target:8,weight:3,color:351},
      { source:8,target:9,weight:4,color:1}
   ]
};

2. 力布局

转化数据为适合生成力导向图的对象数组

var force=d3.layout.force()
    .nodes(dataset.nodes)// 加载节点数据
    .links(dataset.edges)// 加载边数据
    .size([w,h])// 设置有效空间的大小
    .linkDistance(50)// 连线的长度
    .charge(-200)// 负电荷量，相互排斥设置的负值越大越排斥
    .start();// 启用力布局

3. 画线

创建作为连线的svg直线

var edges=svg.selectAll("line")
    .data(dataset.edges)
    .enter()
    .append("line")
    .style("stroke",function(d){// 设置线的颜色
        return colors(d.color);
    })
    .style("stroke-width",function(d,i){// 设置线的宽度
        return d.weight;
    });

4. 画点

创建作为连线的svg圆形

var nodes=svg.selectAll("circle")
    .data(dataset.nodes)
    .enter()
    .append("circle")
    .attr("r",function(d){// 设置圆点的半径，圆点的度越大weight属性值越大，可以对其做一点数学变换
        return Math.log(d.weight)*10;
    })
    .style("fill",function(d){
        return colors(d.weight*d.weight*d.weight);
    })
    .call(force.drag);//可以拖动

5. 节拍

每个节拍力布局会重新模拟一次，直到自动收敛。

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;
    });

})

6. 完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>testD3-22-force.html</title>
    <script type="text/javascript" src="d3.js"></script>
    <style type="text/css">
    </style>
</head>
<body>
<script type="text/javascript">
var h=300;
var w=300;
// 颜色函数
var colors=d3.scale.category20()//创建序数比例尺和包括20中颜色的输出范围

//(1)定义节点和联系对象数组
var dataset={
    nodes:[//节点
        { name:"Adam"},
        { name:"Bob"},
        { name:"Carride"},
        { name:"Donovan"},
        { name:"Edward"},
        { name:"Felicity"},
        { name:"George"},
        { name:"Hannah"},
        { name:"Iris"},
        { name:"Jerry"} 
    ],
    edges:[//边
        { source:0,target:1,weight:1,color:1},
        { source:0,target:2,weight:3,color:4},
        { source:0,target:3,weight:4,color:6},
        { source:0,target:4,weight:6,color:65},
        { source:1,target:5,weight:3,color:76},
        { source:2,target:5,weight:8,color:879},
        { source:2,target:5,weight:7,color:989},
        { source:3,target:4,weight:9,color:643},
        { source:5,target:8,weight:1,color:54},
        { source:5,target:9,weight:3,color:54}, 
        { source:6,target:7,weight:4,color:45},
        { source:7,target:8,weight:0,color:43},
        { source:2,target:8,weight:8,color:243},
        { source:3,target:8,weight:1,color:43},
        { source:5,target:8,weight:5,color:13},
        { source:6,target:8,weight:3,color:351},
        { source:8,target:9,weight:4,color:1}
    ]
};

//(2)转化数据为适合生成力导向图的对象数组
var force=d3.layout.force()
    .nodes(dataset.nodes)//加载节点数据
    .links(dataset.edges)//加载边数据
    .size([w,h])//设置有效空间的大小
    .linkDistance(50)//连线的长度
    .charge(-200)//负电荷量，相互排斥设置的负值越大越排斥
    .start();//设置生效

var svg=d3.select("body")
    .append("svg")
    .attr("width",w)
    .attr("height",h);

//(3)创建作为连线的svg直线
var edges=svg.selectAll("line")
    .data(dataset.edges)
    .enter()
    .append("line")
    .style("stroke",function(d){//  设置线的颜色
        return colors(d.color);
    })
    .style("stroke-width",function(d,i){//设置线的宽度
        return d.weight;
    });

//(4) 创建作为连线的svg圆形
var nodes=svg.selectAll("circle")
    .data(dataset.nodes)
    .enter()
    .append("circle")
    .attr("r",function(d){//设置圆点的半径，圆点的度越大weight属性值越大，可以对其做一点数学变换
        return Math.log(d.weight)*10;
    })
    .style("fill",function(d){
        return colors(d.weight*d.weight*d.weight);
    })
    .call(force.drag);//可以拖动

 //(5)打点更新，没有的话就显示不出来了
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;
    });

})
</script>

</body>
</html>