技术

d3、 d3.force、d3.geom.quadtree。

d3.geom.quadtree

四叉树的应用：图像处理、空间数据索引、2D中的快速碰撞检测、存储稀疏数据等，游戏编程。

上图中的数据就是普通的点，点与点之间没有关系。此函数在构建四叉树的时候（原数据要么是树型的数据要么是包含位置信息的点，此例子是包含位置信息的普通的点），整个rect是一个根节点，当这个节点内部的有大于一个数据点的时候，会对这个节点进行四等分，持续下去直到每个叶子节点至多包含一个数据点。引用： https://www.sypopo.com/post/dJQbeP8Zoj/

四叉树碰撞应用（圆）

d3官方example:

 <!DOCTYPE html>

 <meta charset="utf-8">

 <body>

 <script src="//d3js.org/d3.v3.min.js"></script>

 <script>

     var width = 960,

         height = 500;

     var nodes = d3.range(200).map(function() { return {radius: Math.random() * 12 + 4}; }),

         root = nodes[0],

         color = d3.scale.category10();

     root.radius = 0;

     root.fixed = true;

     var force = d3.layout.force()

         .gravity(0.05)

         .charge(function(d, i) { return i ? 0 : -2000; })

         .nodes(nodes)

         .size([width, height]);

     force.start();

     var svg = d3.select("body").append("svg")

         .attr("width", width)

         .attr("height", height);

     svg.selectAll("circle")

         .data(nodes.slice(1))

         .enter().append("circle")

         .attr("r", function(d) { return d.radius; })

         .style("fill", function(d, i) { return color(i % 3); });

     force.on("tick", function(e) {

         var q = d3.geom.quadtree(nodes),

             i = 0,

             n = nodes.length;

         while (++i < n) q.visit(collide(nodes[i]));  //n^2的复杂度

         svg.selectAll("circle")

             .attr("cx", function(d) { return d.x; })

             .attr("cy", function(d) { return d.y; });

     });

     svg.on("mousemove", function() {

         var p1 = d3.mouse(this);

         root.px = p1[0];

         root.py = p1[1];

         force.resume();

     });

     function collide(node) {

         var r = node.radius + 16,

             nx1 = node.x - r,

             nx2 = node.x + r,

             ny1 = node.y - r,

             ny2 = node.y + r;

         return function(quad, x1, y1, x2, y2) {

             if (quad.point && (quad.point !== node)) {//是叶子节点且不是当前节点

                 var x = node.x - quad.point.x,

                     y = node.y - quad.point.y,

                     l = Math.sqrt(x * x + y * y),

                     r = node.radius + quad.point.radius;

                 if (l < r) {

                     l = (l - r) / l * .5;

                     node.x -= x *= l;

                     node.y -= y *= l;

                     quad.point.x += x;

                     quad.point.y += y;

                 }

             }

             return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;

         };

     }

 </script>

核心代码在 ： L60-L71行。解释如下：

另平移因子S=(r-l)/(2l) ;利用勾股证明得：

因此，程序中偏移实际上是偏大了一点！不过绘制的结果还是挺好的。

经试验，对L36-L44行进行单独迭代，把上述代码中的力去掉。迭代大约30次左右，才能避免碰撞现象。其中迭代step,可以对L67行中的"l"进行适当缩放。注意避免震荡情况（l较大的时候）。

collide函数的分析

测试下面的函数：

 <script>

     function a(x){

         return x(1,2);

     }

     function b(x,y){

         console.log(x+":b:"+y);

     }

     function  c(x) {

         return function(a,b){

             console.log(x+":"+a+":c:"+b);

         }

     }

 </script>

结果：

可见，b 、c两种写法都是ok的，c更骚一点。

quadtree().visit()

前序遍历，关于回调函数返回值：

If the callback returns true for a given node, then the children of that node are not visited; otherwise, all child nodes are visited.

返回值： return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;

意思就是内部的node超出了quad的话，对当前quad的子节点标记为未访问（需要继续对其子节点进行调整）。

d3碰撞源码分析的更多相关文章

  1. d3 bubble源码分析

    技术 d3.d3.pack.d3.hierarchy 展示 https://bl.ocks.org/xunhanliu/e0688dc2ae9167c4c7fc264c0aedcdd1 关于怎么使用, ...

  2. JDK1.8 HashMap 源码分析

    一.概述 以键值对的形式存储,是基于Map接口的实现,可以接收null的键值,不保证有序(比如插入顺序),存储着Entry(hash, key, value, next)对象. 二.示例 public ...

  3. Java并发包源码分析

    并发是一种能并行运行多个程序或并行运行一个程序中多个部分的能力.如果程序中一个耗时的任务能以异步或并行的方式运行,那么整个程序的吞吐量和可交互性将大大改善.现代的PC都有多个CPU或一个CPU中有多个 ...

  4. .net源码分析 – Dictionary<TKey, TValue>

    接上篇:.net源码分析 – List<T> Dictionary<TKey, TValue>源码地址:https://github.com/dotnet/corefx/blo ...

  5. HashMap实现原理及源码分析

    哈希表(hash table)也叫散列表,是一种非常重要的数据结构,应用场景及其丰富,许多缓存技术(比如memcached)的核心其实就是在内存中维护一张大的哈希表,而HashMap的实现原理也常常出 ...

  6. Java集合源码分析（七）HashMap<K, V>

    一.HashMap概述 HashMap基于哈希表的 Map 接口的实现.此实现提供所有可选的映射操作,并允许使用 null 值和 null 键.(除了不同步和允许使用 null 之外,HashMap  ...

  7. OpenCV学习笔记（27）KAZE 算法原理与源码分析（一）非线性扩散滤波

    http://blog.csdn.net/chenyusiyuan/article/details/8710462 OpenCV学习笔记(27)KAZE 算法原理与源码分析(一)非线性扩散滤波 201 ...

  8. HTTP严格安全传输（HTTP Strict Transport Security, HSTS）chromuim实现源码分析（一）

    // HTTP strict transport security (HSTS) is defined in// http://tools.ietf.org/html/ietf-websec-stri ...

  9. Java中HashMap源码分析

    一.HashMap概述 HashMap基于哈希表的Map接口的实现.此实现提供所有可选的映射操作,并允许使用null值和null键.(除了不同步和允许使用null之外,HashMap类与Hashtab ...

随机推荐

  1. [JZOJ 5911] [NOIP2018模拟10.18] Travel 解题报告 （期望+树形DP）

    题目链接: http://172.16.0.132/senior/#contest/show/2530/1 题目: EZ同学家里非常富有,但又极其的谦虚,说话又好听,是个不可多得的人才.        ...

  2. MYSQL5.6/5.7 数据库密码丢失问题处理（需重启）

    文章结构图: 一.MYSQL5.6密码丢失 1.  强行停止MYSQL 丢失超级管理用户ROOT的密码是致命的,可以通过--skip-grant-tables参数来跳过权限表. 停止MYSQL,强行杀 ...

  3. BZOJ 2045 容斥原理

    思路: 同BZOJ 2005 http://blog.csdn.net/qq_31785871/article/details/54314774 //By SiriusRen #include < ...

  4. WPF学习（四） － 附加属性

    冷静了一晚,我就当这次学习的过程是在看狗血剧情的武打小说吧:没有垃圾的武术,只有垃圾的武者…… 还有个话儿怎么说来着:你们是用户,不是客户,也就有个使用的权力.搞清楚身份,别叽叽歪歪的! 没办法,全世 ...

  5. Android 度量单位

    单位 注释 px(像素) 每个像素对应手机上的一个点,在不同设备上1px表示的长度不一定相同 screen size(屏幕尺寸) 指手机对角线的长度,如4.7英寸 resolution(分辨率) 指屏 ...

  6. jQuery学习(七)——使用JQ完成下拉列表左右选择

    1.需求:实现以下功能 2.步骤分析: 第一步:确定事件(鼠标单击事件click) 第二步:获取左侧下拉列表被选中的option($(“#left option:selected”)) [假设左侧se ...

  7. 51nod 1110 距离之和最小V3

    X轴上有N个点,每个点除了包括一个位置数据X[i],还包括一个权值W[i].点P到点P[i]的带权距离 = 实际距离 * P[i]的权值.求X轴上一点使它到这N个点的带权距离之和最小,输出这个最小的带 ...

  8. redis 篇 - 键 and string

    redis 进入控制台 redis-cil 需要输入密码的时候可以是用 -a redis-cil -a abcd1234 redis 数据类型 string hash list set zset( 有 ...

  9. pace.js 原理（转）

    pace.js监控了什么: pace.js对于加载进度监控了什么呢?通过阅读源码,我们看到整体的进度有四个部分组成:document,elements,eventLag和ajax这四种监视器(Moni ...

  10. 越努力越幸运--3-日常bug修复

    提供一个so给PYTHON调用,后端发现业务处理流程不是按照方法传入的参数来跑. 查看c的代码,看了客户端没看出什么问题,查看服务端为什么会出现这样的情况,有些字段明显不是入参带过来的,跟踪服务端解析 ...