花了大半天看了一个八十几行的代码..心累

力导向图是之前就有画过很多次的东西,但是这次的代码看上去很陌生,然后发现是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 力导向图的更多相关文章

  1. D3.js力导向图(适用于其他类型图)中后添加元素遮盖已有元素的问题解决

    上一篇说了在D3.js中动态增加节点及连线的一种实现方式,但是有后添加元素遮盖原节点的现象,这一篇说一下出现这个现象的解决办法. 在D3.js中后添加的元素是会遮盖先添加的元素的,同时还有一个设定:后 ...

  2. D3.js 力导向图的显示优化

    D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部 ...

  3. D3.js力导向图中新增节点及新增关系连线示例

    大家在使用D3.js中的力导向图时,基本都会遇到动态增加节点及连线的需求,这里记录一下我的实现方式. 话不多说,先放代码: <!DOCTYPE html> <html lang=&q ...

  4. D3.js 力导向图的制作

    力导向图中每一个节点都受到力的作用而运动,这种是一种非常绚丽的图表. 力导向图(Force-Directed Graph),是绘图的一种算法.在二维或三维空间里配置节点,节点之间用线连接,称为连线. ...

  5. D3.js 力导向图的拖拽(drag)与缩放(zoom)

    不知道大家会不会跟我一样遇到这样的问题,在之前做的力导向图的基础上加上缩放功能的时候,拖动节点时整体会平移不再是之前酷炫的效果(失去了拉扯的感觉!).天啊,简直不能接受如此丑X的效果.经过不懈的努力终 ...

  6. 记录d3.js 力导向图的平移缩放,类似地图导航点击某一项移动到当前位置

    项目中有用到d3.js用于图结构的查询, 需求如下: 右上角有个模糊搜索功能,查询出来的结果用列表展示 点击列表的某一列,要求画布移动到当前选中的节点的位置,基于画布正中间 搜索出来的结果列表展示用的 ...

  7. D3.js 力导向图(气泡+线条+箭头+文字)

    <!DOCTYPE html> <meta charset="utf-8"> <style> .link { fill: none; strok ...

  8. D3.js 力导向图(小气泡围绕中心气泡)

    html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...

  9. D3.js系列——布局:饼状图和力导向图

    一.饼状图 在布局的应用中,最简单的就是饼状图. 1.数据 有如下数据,需要可视化: , , , , ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些 ...

随机推荐

  1. ThinkPHP 3.2.3 视图模型的使用

    ThinkPHP 3.2.3 试图模型的手册地址是:http://www.kancloud.cn/manual/thinkphp/1781 实例 需求:在博客列表页读取博客的(id.标题.摘要.发布时 ...

  2. 【java基础学习】GUI

    GUI 容器 布局管理器 组件 菜单 事件处理机制

  3. Raspberry PI B+ debian + wifi 网络设置

    # file /etc/network/interfaces auto lo iface lo inet loopback #auto eth0 #allow-hotplug eth0 #iface ...

  4. Jquery中的队列函数quene()、dequene()、clearQuene()

    jQuery中的queue和dequeue是一组很有用的方法,他们对于一系列需要按次序运行的函数特别有用.特别animate动画,ajax,以及timeout等需要一定时间的函数.Queue()和de ...

  5. Eclipse新增Web项目

    [前置条件] 1. 电脑已安装JDK1.6,并成功配置环境变量 2. 电脑已存在tomcat6.0包,无需安装 [操作步骤] 1. 为eclipse配置tomcat6.0 (1)eclipse菜单栏, ...

  6. R数据实战vehicles--1

    新建项目vehicles-project 数据文件vehicles.csv与varlabels.txt放在项目文件中

  7. Hibernate Validator验证标签说明

    Hibernate Validator是JSR-303的一个实现. 在FormBean里添加Hibernate Validator的注解,与定义一个校验类的做法相比.注解更加简洁.灵活. Bean V ...

  8. ThroughRain第一次冲刺总结

    团队名:ThroughRain 项目确定:<餐厅到店点餐系统> 项目背景:本次项目是专门为餐厅开发的一套订餐系统.大家有没有发现在节假日去餐厅吃饭会超级麻烦,人很多, 热门的餐厅基本没有座 ...

  9. Android -- 仿ios上下反弹效果

    1,前几天在一个app上看到了滑动反弹效果,觉得这个效果挺不错的,然后想自己来实现一下,在网上查了一下基本上都是大致的说了下思路,自己看了一下,决定把实现的思路来详细的写下来,先看一下我们实现的效果吧 ...

  10. mfc ui3

    引用:http://www.cnblogs.com/rainbowzc/archive/2010/06/02/1749872.html 本文专题讨论VC中的界面美化,适用于具有中等VC水平的读者.读者 ...