D3.js v5 Tutorials

D3.js v5 教程

https://github.com/d3/d3/blob/master/API.md

CHANGES

https://github.com/d3/d3/blob/master/CHANGES.md

0xfffff & .toString(16)

16 进制转换


d3-scale

https://github.com/d3/d3-scale#installing

# d3 global is exported

$ npm i -S d3-scale


let x = d3.scaleLinear();

ordinal-scales

https://github.com/d3/d3/blob/master/API.md#ordinal-scales

创建一个序数带尺度

https://github.com/d3/d3-scale/blob/master/README.md#scaleBand

continuous-scales

https://github.com/d3/d3/blob/master/API.md#continuous-scales

创建一个定量线性标度

https://github.com/d3/d3-scale/blob/master/README.md#scaleLinear


// d[0] & d[1]
// d.key & d.value
let Xdatas = data.map(d => d.key),
Ydatas = data.map(d => d.value); let width = 800,
height = 500; // x-Axis 轴 scale range
let x = d3.scaleBand()
.domain(Xdatas)
.rangeRound([0, width])
.padding(0.1); // y-Axis 轴 scale range
let y = d3.scaleLinear()
.domain([0, d3.max(Ydatas)])
.rangeRound([height, 0]); let padding = {
left: 50,
top: 20,
right: 50,
bottom: 50
};

what's new

  1. Promise & Async Await & Fetch AP
  2. ES6 module

https://github.com/d3/d3/releases

https://d3js.org.cn/

https://d3js.org.cn/introduce/

refs

http://www.manongjc.com/article/29914.html

https://blog.csdn.net/qq_34414916/article/details/80032731

https://github.com/mp2930696631/d3.js-demo/blob/master/d3.js-demo/testD3_chp9_1.html

D3.js & v4

big break changes

https://github.com/d3/d3/releases/tag/v4.0.0

D3.js & v3

big break changes

https://github.com/d3/d3/releases/tag/v3.0.0

https://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.md


viewBox & preserveAspectRatio

layout responsive

https://stackoverflow.com/questions/9400615/whats-the-best-way-to-make-a-d3-js-visualisation-layout-responsive


<svg id="chart" width="960" height="500"
viewBox="0 0 960 500"
preserveAspectRatio="xMidYMid meet">
</svg>

D3.js v5 Tutorials的更多相关文章

  1. D3.js V5 教程

    D3.js V5 教程 1.在项目中使用D3.js 2. 选择元素和设置(获取)属性 3. 绑定数据 4. 理解Update.Enter.Exit 与 添加.删除元素 未完待续..........

  2. d3.js V5版本在vue里使用 自定义节点图片

    var width = this.$refs.topInfo.offsetWidth; var height = this.$refs.topInfo.offsetHeight; var img_w ...

  3. 用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛

    前言 本文灵感来源于Mike Bostock 的一个 demo 页面 原 demo 基于 D3.js v3 开发, 笔者将其使用 D3.js v5 进行重写, 并改为使用 ES6 语法. 源码: gi ...

  4. D3.js的v5版本入门教程(第十三章)—— 饼状图

    D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这 ...

  5. D3.js的v5版本入门教程(第十二章)—— D3.js中各种精美的图形

    D3.js的v5版本入门教程(第十二章) D3中提供了各种制作常见图形的函数,在d3的v3版本中叫布局,通过d3.layout.xxx,来新建,但是到了v5,新建一个d3中基本的图形的方式变了(我也并 ...

  6. D3.js的v5版本入门教程(第十一章)——交互式操作

    D3.js的v5版本入门教程(第十一章) 与图形进行交互操作是很重要的!所谓的交互操作也就是为图形元素添加监听事件,比如说当你鼠标放在某个图形元素上面的时候,就会显示相应的文字,而当鼠标移开后,文字就 ...

  7. D3.js的v5版本入门教程(第九章)——完整的柱状图

    D3.js的v5版本入门教程(第九章) 一个完整的柱状图应该包括的元素有——矩形.文字.坐标轴,现在,我们就来一一绘制它们,这章是前面几章的综合,这一章只有少量新的知识点,它们是 d3.scaleBa ...

  8. D3.js的v5版本入门教程(第八章)—— 坐标轴

    D3.js的v5版本入门教程(第八章) D3中没有现成的坐标轴图形,需要我们自己用其他组件拼凑而成.D3中提供了坐标轴组件,使得我们在SVG中绘制一个坐标轴变得像添加一个普通元素那样简单 为了表绘制一 ...

  9. D3.js的v5版本入门教程(第七章)—— 比例尺的使用

    D3.js的v5版本入门教程(第七章) 比例尺在D3.js中是一个很重要的东西,我们可以这样理解d3.js中的比例尺——一种映射关系,从domain映射到range域(为什么会是domain和rang ...

随机推荐

  1. Linux上VsCode编译打包运行

    前提:最好使用root用户可以排除一些不必要的错误. 一. 准备环境 Node.js(>= 8.12.0, < 9.0.0) Python2.7 Yarn(可以通过npm install ...

  2. python编程入门之简介

    引用百度百科: Python是一种面向对象.直译式计算机程序设计语言,由荷兰人Guido van Rossum发明于1989年,1991年发行第一个公开发行版.它常被昵称为胶水语言,它能够很轻松的把用 ...

  3. vue filters过滤器

    vue filters过滤器 vue.js允许我们自定义过滤器,可被使用于一些常见的文本格式化,过滤器可以用在两个地方,双花括号插值和 v-bind表达式.最常见的就是双花括号插值. 比如如下代码:{ ...

  4. ASP.NET quartz 定时任务

    1.下载 2.使用例子 Demo 概述:Quartz 是开源的定时任务工具类,默认每隔10秒执行一次任务,相当于C#的Timer,不断的循环执行(Start 方法),也可以随时停止(ShutDown方 ...

  5. ESP32 I2S

    I2S支持DMA; I2S可以直接利用DAC来输出模拟信号 (GPIO 25 & GPIO 26): 高精度时钟使能参数:   .use_apll = true ESP32配置外设一般都是配置 ...

  6. Android学习之基础知识十一 —运用手机多媒体

    一.使用通知(Notification) 通知(Notification)是Android系统中比较有特色的一个功能,当某个应用程序希望向用户发出一些提示信息,而该应用程序又不在前台运行时,就可以借助 ...

  7. java 面向对象基本知识

    1.继承 使用extends实现继承 只有单继承 子类继承父类,可以得到父类的全部属性和方法 (除了父类的构造方法),但不见得可以直接访问(比如,父类私有的属性和方法).  instanceof是二元 ...

  8. android 模仿大众点评团购卷列表多余3条时折叠,点击时显示剩余全部的功能

    要实现这样一个效果:加载一组数据,当这组数据的条数超过2条时,则这显示两条,其余的隐藏,当点击“展开全部时”在显示余下的部分.效果如下图所示: 展开前的效果: 展开后的效果 : 实现思路:控制数据而不 ...

  9. 【vue】chrome已安装Vue Devtools在控制台却无显示

    chrome已安装Vue Devtools在控制台却无显示的解决: 在点亮Vue Devtools图标后,控制台没有vue解读显示. 原因:脚手架配置NODE_ENV直接定义为了production版 ...

  10. BusyBox下tftp命令的使用

    一.简介 BusyBox下的tftp是一款应用于嵌入式开发系统上的一款小巧tftp工具,为开发者提供一个tftp服务的使用平台. 通常是,PC开发主机作为服务器(Server),开发系统(板)作为客户 ...