D3.js 力导向图
花了大半天看了一个八十几行的代码..心累
力导向图是之前就有画过很多次的东西,但是这次的代码看上去很陌生,然后发现是D3更新了4.0....
先贴代码
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"); var color = d3.scaleOrdinal(d3.schemeCategory20); var simulation = d3.forceSimulation()
.force("link",d3.forceLink().id(function(d){return d.id;}))
.force("charge",d3.forceManyBody())
.force("center",d3.forceCenter(width/2,height/2)); d3.json("miserables.json",function(error,graph){
if(error) throw error; var link = svg.append("g")
.attr("class","links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width",function(d){return Math.sqrt(d.value);}); var node = svg.append("g")
.attr("class","nodes")
.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
.attr("r",5)
.attr("fill",function(d){return color(d.group);})
.call(d3.drag()
.on("start",dragstarted)
.on("drag",dragged)
.on("end",dragended)); simulation.nodes(graph.nodes)
.on("tick",ticked)
.force("link")
.links(graph.links); function ticked(){
link
.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;}); node
.attr("cx",function(d){return d.x;})
.attr("cy",function(d){return d.y;});
} }); function dragstarted(d){
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx=d.x;
d.fy=d.y;
} function dragged(d){
d.fx=d3.event.x;
d.fy=d3.event.y;
} function dragended(d){
if(!d3.event.active) simulation.alphaTarget(0);
d.fx=null;
d.fy=null;
}
效果图:
1.定义颜色比例尺
var color = d3.scaleOrdinal(d3.schemeCategory20);
2.创建一个力导向图的模拟器(不一定准确呐,simulation自己直译了)
var simulation = d3.forceSimulation()
.force("link",d3.forceLink().id(function(d){return d.id;}))
.force("charge",d3.forceManyBody())
.force("center",d3.forceCenter(width/2,height/2));
第二句没看懂,不知道为啥要这样设置id,后面还有一句是跟simulation.force("link")有关的,没搞懂这两句的具体含义,先放一放吧,再看几个图可能能懂,能查的资料实在是太少了。
第三句后面没有用到,应该是是用了默认值
第四句是设定图的中心
3.绘制连线和节点
var link = svg.append("g")
.attr("class","links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width",function(d){return Math.sqrt(d.value);}); var node = svg.append("g")
.attr("class","nodes")
.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
.attr("r",5)
.attr("fill",function(d){return color(d.group);})
.call(d3.drag()
.on("start",dragstarted)
.on("drag",dragged)
.on("end",dragended));
4.调用模拟器(和第三步顺序可以调换)
simulation.nodes(graph.nodes)
.on("tick",ticked)
.force("link")
.links(graph.links);
第一句和最后一句很好理解,绑定数组。
第二句是为了更新坐标。
第三句没看懂,应该和我上面那一句没看懂有关系...先记着。
5.拖动节点的三个过程
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart(); //restart是重新恢复模拟
d.fx = d.x; //d.x是当前位置,d.fx是固定位置
d.fy = d.y;
} function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
} function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null; //解除dragged中固定的坐标
d.fy = null;
}
alpha是动画的冷却系数,运动过程中会不断减小,直到小于0.005为止,此时动画会停止。
D3.js 力导向图的更多相关文章
- D3.js力导向图(适用于其他类型图)中后添加元素遮盖已有元素的问题解决
上一篇说了在D3.js中动态增加节点及连线的一种实现方式,但是有后添加元素遮盖原节点的现象,这一篇说一下出现这个现象的解决办法. 在D3.js中后添加的元素是会遮盖先添加的元素的,同时还有一个设定:后 ...
- D3.js 力导向图的显示优化
D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部 ...
- D3.js力导向图中新增节点及新增关系连线示例
大家在使用D3.js中的力导向图时,基本都会遇到动态增加节点及连线的需求,这里记录一下我的实现方式. 话不多说,先放代码: <!DOCTYPE html> <html lang=&q ...
- D3.js 力导向图的制作
力导向图中每一个节点都受到力的作用而运动,这种是一种非常绚丽的图表. 力导向图(Force-Directed Graph),是绘图的一种算法.在二维或三维空间里配置节点,节点之间用线连接,称为连线. ...
- D3.js 力导向图的拖拽(drag)与缩放(zoom)
不知道大家会不会跟我一样遇到这样的问题,在之前做的力导向图的基础上加上缩放功能的时候,拖动节点时整体会平移不再是之前酷炫的效果(失去了拉扯的感觉!).天啊,简直不能接受如此丑X的效果.经过不懈的努力终 ...
- 记录d3.js 力导向图的平移缩放,类似地图导航点击某一项移动到当前位置
项目中有用到d3.js用于图结构的查询, 需求如下: 右上角有个模糊搜索功能,查询出来的结果用列表展示 点击列表的某一列,要求画布移动到当前选中的节点的位置,基于画布正中间 搜索出来的结果列表展示用的 ...
- D3.js 力导向图(气泡+线条+箭头+文字)
<!DOCTYPE html> <meta charset="utf-8"> <style> .link { fill: none; strok ...
- D3.js 力导向图(小气泡围绕中心气泡)
html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...
- D3.js系列——布局:饼状图和力导向图
一.饼状图 在布局的应用中,最简单的就是饼状图. 1.数据 有如下数据,需要可视化: , , , , ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些 ...
随机推荐
- Javascript中的new
直接上代码 function test () { } document.write(typeof test() + "<br />") document.write(t ...
- Visual Studio中删除所有空行
解决方法如下: 使用快捷键Ctrl+H,显示查找和替换视图菜单 Find what(查找内容):^:b*$\n Replace with(替换为):[Empty] (空字符串,什么都不用填) Look ...
- ModSecurity 白名单设置
方法一.SecRuleRemoveById 指令:通过Rule ID禁用指定规则 #waf whitelist <LocationMatch .*> SecRuleRemoveById 9 ...
- Characteristics of Some CISCs, RISCs, and Superscalar Processors
COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION Although RISC archite ...
- QMessageBox
#include "dialog.h" #include "ui_dialog.h" #include<QMessageBox> Dialog::D ...
- ThinkPHP的缓存技术
原文:ThinkPHP的缓存技术 如果没有缓存的网站是百万级或者千万级的访问量,会给数据库或者服务器造成很大的压力,通过缓存,大幅减少服务器和数据库的负荷.假如我们 把读取数据的过程分为三个层,第一个 ...
- LightOj 1236 - Pairs Forming LCM (分解素因子,LCM )
题目链接:http://lightoj.com/volume_showproblem.php?problem=1236 题意:给你一个数n,求有多少对(i, j)满足 LCM(i, j) = n, ...
- Hadoop学习笔记: 全排序
在Hadoop中实现全排序有如下三种方法: 1. 只使用一个reducer 2. 自定义partitioner 3. 使用TotalOrderPartitioner 其中第一种方法显然违背了mapre ...
- The type XXX cannot be resolved. It is indirectly referenced from required .class files错误.....
遇到The type XXX cannot be resolved. It is indirectly referenced from required .class files错误.....,查找的 ...
- PAT——乙级真题1002代码