d3的一些总结
核心操作: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:从数据到图的数据。
- rect的位置和大小
注意:图数据与实际图形的对应,这里作者,把rect的中心计算成x y,把rect的宽高的1/2记作width,height
如下图所示:
- 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的一些总结的更多相关文章
- D3.js学习(七)
上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画.所以,我们还需要在原来 ...
- D3.js学习(六)
上节我们学习了如何绘制多条曲线, 以及给不同的曲线指定不同的坐标系.在这节当中,我们会对坐标轴标签相关的处理进行学习.首先,我们来想一个问题, 如何我们的x轴上的各个标签的距离比较近,但是标签名又比较 ...
- D3.js学习(五)
上一节我们已经学习了如何设置填充区域,其实理解了他的实现原理还是非常简单了.这一节中, 我们主要学习多条曲线的绘制,以及给不同的曲线指定不同的纵坐标. 新的数据 由于我们要画两条曲线,所以我们要在原来 ...
- D3.js学习(四)
上一节我们已经学习了线条样式和格栅的绘制,在这一节中我们将要根据之前绘制的线条对图表进行填充,首先来看一下我们的目标吧 在这个图表中,我们对位于线条下面的空间进行了填充,那么,如何改做到呢? 设置填充 ...
- D3.js学习(三)
上一节中,我们已经画出了图表,并且给图表添加了坐标轴的标签和标题,在这一节中,我们将要学习几个绘制线条不同特性的几个函数,以及给图表添加格栅.ok,进入话题! 如何给线条设置绘制的样式? 这个其实非常 ...
- D3.js学习(一)
从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有 ...
- svg + d3
为了实现元素的添加,删除,拖拽,左键点击,右键单击,悬浮等功能,使用了d3 + svg 的技术来实现界面. 最开始是采用canvas,但是由于功能原因放弃了该技术,可以看下 canvas简介 另附:c ...
- D3中selection之使用
1. 极为重要的reference: [1] How selections works. http://bost.ocks.org/mike/selection/ [2] Nested selecti ...
- D3中动画(transition函数)的使用
关于transition的几个基本点: 1. transition()是针对与每个DOM element的,每个DOM element的transition并不会影响其他DOM element的tra ...
- D3数据绑定
这里转载一个非常经典的关于D3数据绑定的帖子,由D3作者自己写的,非常棒,以至于我忍不住全文copy到此. 原文地址 Thinking with Joins Say you’re making a b ...
随机推荐
- scanf正则表达式
#define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> void main() { ] = ...
- threejs 入门教程1
最近在看threejs开发指南,总结一下制作最基础的3d场景的8步: 1. 设置场景大小 2. 创建WebGl渲染器 3. 指定根节点元素 4. 初始化场景 5. 添加相机到场景 6. 创建物体到场景 ...
- POJ 3299 模拟
水题,但是WA了一屏--- swap的时候忘了把读入的数字也swap了---------..[尴尬] // by SiriusRen #include <cmath> #include & ...
- SSIS获取Oracle数据库数据
获取Oracle数据库步骤如下: 1.目标服务器获取连接Oracle数据库权限2.安装Oracle客户端,名称为win32_11gR2_client 安装管理员版本的.3.将配置文件tnsnames. ...
- 002.ActiveMQ的安装
本安装说明基于CentOS7.1的版本,其他版本也基本可以参考. 1. 安装JDK1.8 CentOS7.1版本安装时忘记是默认还是自己选中的安装了OpenJDK,也是1.8的版本,因为ActiveM ...
- Vue.js Ajax动态参数与列表显示
一.动态参数显示 1.引入js <script type="text/javascript" src="/js/vue.min.js"></s ...
- 我所认识的EXT2(一)
前言: 本文是笔者自己在学习文件系统中的一些体会,写出来和大家分享一下.本文首先是介绍了下文件系统的一些理论概念,然后分析了ext2文件系统的原理和部分源码. 文件系统是什么: 人们在认识一件陌生事物 ...
- 启动tomcat运行maven工程报错:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:2.3.2:
控制台报错信息:
- 利用php的GD库生成验证码
<?php ,); //创建一个100宽30高的底图,默认黑色 ,,); //修改颜色.数字对应 rgb 的三个数值.白色 imagefill(,,$bgcolor); //从左上角到右下角把颜 ...
- TP5 错误信息提示入坑指南
查遍了百度,基本都是在 config.php 开启调试 然后还有一个错误信息提示 然后做完这些以后,很神奇的事情发生了! 那就是居然没有任何鬼用.依旧是提示页面错误!什么鬼信息都没有! 然后发现在 ...