d3从入门到出门

时间 2020-01-19

标签 d3 入门出门繁體版

原文原文链接

前言

基于d3js 5.5版本基础教程css

环境配置

下载最新d3js文件, 参考: d3js官网html

当前版本5.5, d3js v4与v3之间的api有必定的差别。json

选择元素

d3主要有两个选择器api

select网络

选择相应的dom元素, 若是有多个, 选择第一个app
selectAlldom

选择全部的指定的dom元素.ide

经过选择器能够选择相应得dom元素, 而选择器的语法基本就是css选择器的语法.svg

css选择器语法: http://www.w3school.com.cn/c***ef/css_selectors.aspwordpress

增删查改

假设网页有如下元素, 关于d3的元素操做都将引用本段落

// 省略html,head等标签
<body>
    <input type="checkbox">
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    <svg><rect></rect></svg>

</body>

元素增长

append

在选择的元素中增长一个子元素,

示例: 
d3.select("body").append("p") //将会在svg后面增长一个内容为空的p元素

insert

在选择的元素里面或者前面增长一个元素,

示例1:
d3.select("body").insert("p") //与append方法一致

示例2:
d3.select("body").insert("p", "p") //第一个参数为要插入的元素, 第二个元素为before, 即首先经过第二个参数选择相应位置，在这个选择的元素以前插入一个元素

内容修改

text

修改元素的文本内容

示例:
d3.select("p").text("段落一修改后的内容") // 将段落一的内容修改成text函数传入的参数，若是传入的文本包含html标签，则会被转义

html

修改元素内容

示例:
d3.select("p").html("<div>段落一修改后的内容</div>") // 将段落一的内容修改成text函数传入的参数，若是传入的文本包含html标签，不会被转义

属性增长修改

attr

增长或者修改属性(若是属性已存在)

示例:
d3.select("svg rect").attr("width", 200) //将选择的rect元素width属性修改成200

style

增长或这修改样式(若是属性已存在)

示例:
d3.selectAll("p").style("color", "#ff0000") //选择全部p元素，并将其文字颜色设置为红色

property

增长或这修改样式(若是属性已存在)

示例:
d3.select("input").property("checked",true); //选择第一input元素，将checked属性设置为true

元素删除

remove

将选定的元素删除

示例:
d3.select("p").remove //选择第一个p元删除

链式操做

d3与jQuery有同样的链式操做, 只要操做合法你能够一直连接下去

示例:
//首先选择第一个p元素而后将元素的文本内容修改成'修改后内容',并将其文字颜色设置为红色
d3.select("p")
  .text("修改后内容")
  .style("color", "red")

数据绑定与加载

数据绑定

datum

将一个数据绑定到全部选择的元素上

// 经过datum元素将"datum"数据传入, 在text方法里面传入一个箭头函数，而箭头函数直接返回数据
d3.selectAll("p")
  .datum("datum")
  .text((d, i) => d)

// 修改后的内容以下
...省略不相内容
<p>datum</p>
<p>datum</p>
<p>datum</p>

data

传入一组数据，分别于选择的元素一一绑定

// 经过datum元素将"datum"数据传入, 在text方法里面传入一个箭头函数，而箭头函数直接返回数据
d3.selectAll("p")
  .data([1,2,3])
  .text((d, i) => d)

// 修改后的内容以下
...省略不相关内容
<p>1</p>
<p>2</p>
<p>3</p>

update, enter, exit

参考图片内容:

网络数据加载

d3内置数据加载的方法，能够解析比较常见的数据格式，主要有如下四种，这里主要以csv文件个数数据做为示例

d3.csv
d3.json
d3.tsv
d3.xml

csv文件内容以下
//data.csv
name, age
zhangsan, 11
wangwu, 22
lisi, 33

// 加载csv
d3.csv("data.csv", (data) => {
    console.log(data)
})

// 输出, d3已经将csv格式的数据解析成可识别的对象
{name: "zhangsan", " age": " 11"}
{name: "wangwu", " age": " 22"}
{name: "lisi", " age": " 33"}

事件

d3天然也能够监听相应的事件。
经常使用事件以下:

// 选择全部的p元素，当鼠标移到相应的p元素上面，p元素的字体颜色就会变成橙色，移出的时候就会变成红色
d3.selectAll("p")
      .on("mouseover", function(){
          d3.select(this)
            .style("color", "orange");
      })
      .on("mouseout", function() {
        d3.select(this)
            .style("color", "red");
      })

动画

能够经过如下四个过程使得选定的元素生成动态效果

transition

启动动画效果
duration

动画时间，单位为毫秒
ease

过渡方式, 默认为线性过渡
delay

延迟时间，在指定的一段时间后才启动动画

// 选中第一个元素，先延迟延迟一秒，动画时间2秒，在两秒内同时从默认的颜色渐变到红色，字体大小从默认大小变成50px
d3.select("p")
      .transition()
      .delay(1000)
      .duration(2000)
      .style("background-color", "red")
      .style("font-size", "50px")

缩放

因为使用的数值与图片中的长宽数值有必定的差别，好比，图片长度为500，可是数值都是在10之内, 咱们作出来的图必定是须要尽可能的填充整个视图，因此须要对源数据作必定的缩放, 下面介绍两类缩放，d3自己有不少的缩放函数。

线性缩放

var data = [100, 400, 300, 900, 850, 1000];

var scale = d3.scaleLinear()
            // 源数据数值范围
            .domain([0, d3.max(data)])
            // 真实距离大小范围，通常是展现区长宽
            .range([0, 500]);
console.log(scale(20))
console.log(scale(800))
console.log(scale(1000))

输出
10
400
500

离散缩放

// 经常使用于选区颜色
var index = [0, 1, 2, 3, 4]
var color = ["red", "blue", "green", "yellow", "black"]
var ordinal = d3.scaleOrdinal()
                .domain(index)
                .range(color)
console.log(ordinal(1))
console.log(ordinal(4))
console.log(ordinal(100))

//输出
blue
black
blue

坐标轴

常见图标展现通常都会带有坐标轴，由于坐标轴是一个很经常使用的功能，因此d3有内置的函数用于生成坐标轴

可选坐标轴

axisTop
axisRight
axisBottom
axisLeft

上面的上下左右主要指坐标周的刻度文字的位置，好比axisTop是指文字在横轴上面

var width = 400,
    height = 100;

var data = [10, 15, 20, 25, 30];

// 在body元素内插入一个svg元素 
var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

// 建立一个线性缩放函数
var scale = d3.scaleLinear()
              .domain([d3.min(data), d3.max(data)])
              .range([0, width - 100]);

// 建立一个坐标轴，需传入缩放函数
var x_axis = d3.axisBottom()
               .scale(scale);

//在svg函数里面加入一个g元素，并建立坐标轴
svg.append("g")
   .call(x_axis);

坐标轴微调

//旋转坐标轴文字
d3.selectAll("svg > g  text")
  .attr("transform", "rotate(45)")
  // 文字沿当前方向距离轴位置大小
  .attr("y", 20)

柱状图

柱状图示例
参考: http://www.tutorialsteacher.com/d3js/create-bar-chart-using-d3js

饼图

参考: http://www.tutorialsteacher.com/d3js/create-pie-chart-using-d3js

后记

之因此叫作从入门到出门, 是由于本人学得很快, 忘得更快。

参考连接

https://d3js.org/
http://www.tutorialsteacher.com/d3js
http://www.ourd3js.com/wordpress/396/

1. JavaCC从入门到出门
2. D3.js从入门到“放弃”指南
3. D3.js从入门指南
4. babel从入门到入门 babel从入门到入门
5. AccessibilityService 从入门到出轨
6. RxJava 从入门到出轨
7. 【译】D3入门
8. D3入门
9. D3.js入门
10. babel从入门到入门
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Neo4j数据库入门教程 - NoSQL教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用