核心操作:https://blog.csdn.net/kriszhang/article/details/70174410

Update、Enter、Exit 简练详细说明:http://www.cnblogs.com/koto/p/5980646.html

D3.nest(类似于groupby,比如想对数据进行上卷或下钻等数据立方的操作,可以瞅一下这个链接)的使用:https://blog.csdn.net/gdp12315_gu/article/details/51721988

JS的模块化说明(看懂第三方js库的入门blog):https://my.oschina.net/chenzhiqiang/blog/129783

二分图源码阅读:https://github.com/NPashaP/Viz

关于d3的call函数的说明:

D3的call函数只在d3.select后出现,其他情况,均属于js原生的call(这两个call的作用和用法完全不同,注意区分)。

比如你编写了一个比较好用的自定义图,肯定需要指定一个容器来放置。比如echarts: echarts.init(容器); 把容器传入api中,这是最简单的做法。但是d3使用下面的方式来组织这种结构:

这样call返回数据仍然是一个selection,符合d3的链式风格。

二分图

实例:https://github.com/NPashaP/Viz

https://github.com/NPashaP/Viz文件中(阅读未进行压缩的)的第一个图就是,大概是370多行。推荐阅读https://github.com/nelsonkuang/ant-admin/blob/master/src/utils/d3-viz.js

以后大家写画图的时候,推荐使用这种结构。

关键点1:从数据到图的数据。

  1. rect的位置和大小

    注意:图数据与实际图形的对应,这里作者,把rect的中心计算成x y,把rect的宽高的1/2记作width,height

    如下图所示:

  2. path(每个弯曲的面积)
Return的形式: return ["M",x1,",",y1,"C",mx1,",",y1," ",mx1,",",y2,",",x2,",",y2,"L"
,x3,",",y3,"C",mx3,",",y3," ",mx3,",",y4,",",x4,",",y4,"z"].join("");

其中'M'(move to),'C'(curveto)都是大写的,表示绝对定位。(小写的表示相对定位)。'Z'(closepath)从当前位置到起点画一条直线闭合。

C表示三阶贝塞尔曲线,参数为三个点p1,p2,p3,p3是结束点,开始点p0与控制点p1控制前半段曲线的弯曲,控制点p2和结束点p3控制后半段曲线的弯曲。

如图所示:

关键点2:从图数据到图形

d3的一些总结的更多相关文章

  1. D3.js学习(七)

    上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画.所以,我们还需要在原来 ...

  2. D3.js学习(六)

    上节我们学习了如何绘制多条曲线, 以及给不同的曲线指定不同的坐标系.在这节当中,我们会对坐标轴标签相关的处理进行学习.首先,我们来想一个问题, 如何我们的x轴上的各个标签的距离比较近,但是标签名又比较 ...

  3. D3.js学习(五)

    上一节我们已经学习了如何设置填充区域,其实理解了他的实现原理还是非常简单了.这一节中, 我们主要学习多条曲线的绘制,以及给不同的曲线指定不同的纵坐标. 新的数据 由于我们要画两条曲线,所以我们要在原来 ...

  4. D3.js学习(四)

    上一节我们已经学习了线条样式和格栅的绘制,在这一节中我们将要根据之前绘制的线条对图表进行填充,首先来看一下我们的目标吧 在这个图表中,我们对位于线条下面的空间进行了填充,那么,如何改做到呢? 设置填充 ...

  5. D3.js学习(三)

    上一节中,我们已经画出了图表,并且给图表添加了坐标轴的标签和标题,在这一节中,我们将要学习几个绘制线条不同特性的几个函数,以及给图表添加格栅.ok,进入话题! 如何给线条设置绘制的样式? 这个其实非常 ...

  6. D3.js学习(一)

    从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有 ...

  7. svg + d3

    为了实现元素的添加,删除,拖拽,左键点击,右键单击,悬浮等功能,使用了d3 + svg 的技术来实现界面. 最开始是采用canvas,但是由于功能原因放弃了该技术,可以看下 canvas简介 另附:c ...

  8. D3中selection之使用

    1. 极为重要的reference: [1] How selections works. http://bost.ocks.org/mike/selection/ [2] Nested selecti ...

  9. D3中动画(transition函数)的使用

    关于transition的几个基本点: 1. transition()是针对与每个DOM element的,每个DOM element的transition并不会影响其他DOM element的tra ...

  10. D3数据绑定

    这里转载一个非常经典的关于D3数据绑定的帖子,由D3作者自己写的,非常棒,以至于我忍不住全文copy到此. 原文地址 Thinking with Joins Say you’re making a b ...

随机推荐

  1. scanf正则表达式

    #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> void main() { ] = ...

  2. threejs 入门教程1

    最近在看threejs开发指南,总结一下制作最基础的3d场景的8步: 1. 设置场景大小 2. 创建WebGl渲染器 3. 指定根节点元素 4. 初始化场景 5. 添加相机到场景 6. 创建物体到场景 ...

  3. POJ 3299 模拟

    水题,但是WA了一屏--- swap的时候忘了把读入的数字也swap了---------..[尴尬] // by SiriusRen #include <cmath> #include & ...

  4. SSIS获取Oracle数据库数据

    获取Oracle数据库步骤如下: 1.目标服务器获取连接Oracle数据库权限2.安装Oracle客户端,名称为win32_11gR2_client 安装管理员版本的.3.将配置文件tnsnames. ...

  5. 002.ActiveMQ的安装

    本安装说明基于CentOS7.1的版本,其他版本也基本可以参考. 1. 安装JDK1.8 CentOS7.1版本安装时忘记是默认还是自己选中的安装了OpenJDK,也是1.8的版本,因为ActiveM ...

  6. Vue.js Ajax动态参数与列表显示

    一.动态参数显示 1.引入js <script type="text/javascript" src="/js/vue.min.js"></s ...

  7. 我所认识的EXT2(一)

    前言: 本文是笔者自己在学习文件系统中的一些体会,写出来和大家分享一下.本文首先是介绍了下文件系统的一些理论概念,然后分析了ext2文件系统的原理和部分源码. 文件系统是什么: 人们在认识一件陌生事物 ...

  8. 启动tomcat运行maven工程报错:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:2.3.2:

    控制台报错信息:

  9. 利用php的GD库生成验证码

    <?php ,); //创建一个100宽30高的底图,默认黑色 ,,); //修改颜色.数字对应 rgb 的三个数值.白色 imagefill(,,$bgcolor); //从左上角到右下角把颜 ...

  10. TP5 错误信息提示入坑指南

    查遍了百度,基本都是在 config.php 开启调试 然后还有一个错误信息提示 然后做完这些以后,很神奇的事情发生了! 那就是居然没有任何鬼用.依旧是提示页面错误!什么鬼信息都没有! 然后发现在  ...