数据可视化 D3.js实现力导向图之一(实现按指定字段确定link的source和target)
2013-12-24 00:09
387 查看
很早在找某些酒店数据库的时候就看到了某个24.5G的压缩数据库,一直未能想到能够很形象展现出关系的图表插件,直到看到某篇《利用D3.js实现大数据资料进行可视化分析》的帖子之后,为了能够很直观的展现出数据关系,也想用D3.js的力导向图来进行展现,但是发现D3的force directed graph不能按照自己指定的字段来确定link关系,网上搜了很久,都没有搜到遇到这个问题的资料,于是便只能自己动手修改源码实现需求了,阅读源码后发现只需要修改force.start = function() 中的第二个for循环
for (i = 0; i < m; ++i) {
o = links[i];
if (typeof o.source == "number") o.source = nodes[o.source];
if (typeof o.target == "number") o.target = nodes[o.target];
++o.source.weight;
++o.target.weight;
}
把link指向的源和目标按照自己的需求指向特定的node即可(这里默认是按照node的index来确定)。
最后经过反复提炼,最后把源码改成了通用性比较广的的方式,link中添加一个字段指定node中的某个字段作为关键字段,当link中未指定时,用node的第一个字段来作为关键字段。
直接将源码中的第二个for循环替换为以上代码即可。(本来是想把整个demo上传的,由于某种原因限制了,文件无法外传,只能把关键部分代码贴出)
相关文章推荐
- D3.js force力导向图用指定的字段确定link的source和target,默认是索引
- 数据可视化 D3.js实现力导向图之二(node带文字说明和提示)
- 实例教学:使用 D3.js 实现数据可视化
- [转] 用ROW_NUMBER()实现取指定行的数据 和从一个表中向另一个表中插入数据并实现某字段每行递增
- Silverlight 数据绑定 (1):怎样实现数据绑定 &&Silverlight 数据绑定 (2):Source to Target
- 购物车二级列表的实现,在一级列表基础上,bean类里再添加两个字段(请求本地json数据)
- (3)基于Echarts插件的多维数据可视化设计和实现
- 某职员在会议上用五种方法实现Python数据可视化,秀了老总一脸!
- 在水晶报表中实现任意选择指定字段显示-模板及C#升级版
- 数据结构四:栈的两种形式LinkStack和SeqStack用线性表的实现方式,以及SeqQueue和LinkQueue的实现
- 开发笔记:基于EntityFramework.Extended用EF实现指定字段的更新
- 如何实现动态指定存储过程的参数来可视化建立报表工程
- C# 如何获取SQL Server 中指定数据表的所有字段名和字段类型
- 在水晶报表中实现任意选择指定字段显示(补充)-格线的实现
- sql 获取指定数据表的所有字段名称的字符串
- 利用shell删除数据表中指定信息和字段对应的文件
- 基于Ado.net Entity Framework 通过系统运行时动态编译实现数据表字段的增删
- MySQL为数据表的指定字段插入数据
- [置顶] (2)基于Echarts插件的多维数据可视化设计和实现
- 触发器实现对插入数据的字段更改 Oracle+SQL Server