您的位置:首页 > Web前端 > JavaScript

数据可视化 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上传的,由于某种原因限制了,文件无法外传,只能把关键部分代码贴出)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐