D3可视化：（1）初次见面，SVG与D3的魅力

时间 2019-11-16

标签 d3 可视化初次见面 svg 魅力繁體版

原文原文链接

D3.js是一个基于HTML/SVG/CSS的数据可视化库，是领域内很是强大的存在了。javascript

从此会在工做使用，也所以开始了自学之旅。学习过程当中，我主要经过Curran Kelleher老师的系列教程进行学习，这个笔记用于学习、整理和分享，陆续学习、更新和记录中....html

原文连接

学习目的：java

熟悉和认识D3.js
练习使用SVG画图，熟悉操做
练习D3.js的基本函数和操做

完成效果图： 在线demo node

D3初印象

选择集

D3是实现数据可视化，仍然离不开传统DOM的选择和操做，也所以，D3提供了相似Jquery的DOM操做指令：git

d3.select：选择第一个指定元素
d3.selectAll ：选择全部的元素

const svg = d3.select('svg') //选择svg
const p = svg.selectAll('p') //选择svg下全部的p标签

复制代码

固然，能够使用#id 以及 .class 对id和类进行选择github

查看状态

d3.select和d3.selectAll返回的都是选择集，添加、删除以及修改都须要用到选择集，查看状态有三个函数能够使用：编程

selection.empty() 选择集为空，返回true，不然返回false
selection.node() 返回第一个非空元素，若是选择集为空，返回null
selection.size() 返回选择集中的元素个数

设定和获取属性

使用select或selectAll选择后，能够经过attr获取和设定属性，能够使用append方法添加元素app

const svg = select('svg');
svg.append('circle')
    .attr('r','30')

复制代码

使用D3和SVG画图

html文件svg

<html lang="en">
<head>
    <title>Smile face with d3</title>
</head>
<body>
    <svg width="960" height="500"></svg>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="index.js"></script>
</body>
</html>
复制代码

主要内容经过index.js实现:函数

第一步：经过d3选择SVG，使用`circle`构建轮廓

const svg = d3.select('svg');
const height = +svg.attr('height');
const width = +svg.attr('width');
svg.append('circle')
    .attr('r',height / 2)
    .attr('cx', width / 2)
    .attr('cy', height / 2)
    .attr('fill', 'yellow')
    .attr('stroke','black')

const leftEye = svg.append('circle')
    .attr('r', 30)
    .attr('cx', width / 2 - 100)
    .attr('cy', height / 2 - 80)
    .attr('fill', 'black')

const rightEye = svg.append('circle')
    .attr('r', 30)
    .attr('cx', width / 2 + 100)
    .attr('cy', height / 2 - 80)
    .attr('fill', 'black')
复制代码

要点：

经过attr获取的属性是string类型的，经过parseFloat或者+转换为number类型
对圆形circle的属性cx cy等，使用变量做为其大小设置的值，而不用一个数字，方便往后的维护
leftEye和RightEye用相似的方法，创造出来，并将眼睛放置在合适的位置。

代码优化

1）能够发现，对三个圆圆心的操做cx和cy出现了屡次，而做用也仅仅是为了将圆放在中心。所以，能够经过SVG中的<g>来分组来实现一次性操做。

const g = svg.append('g')
    .attr('transform',`translate(${ width / 2}, ${ height / 2})`)

//这样，在画圆的时候，就能够去掉对其圆心的操做，由于默认的位置就在中心了
const circle = g.append('circle')
    .attr('r',height / 2)
    .attr('fill', 'yellow')
    .attr('stroke','black')
复制代码

2）一样的，对于眼睛的操做，也有点繁琐，能够经过变量和分组，提升代码的可维护性能。

const eyeSpacing = 100;
const eyeYoffset = -80
const eyeRadius = 30;

const eyesG = g.append('g')
    .attr('transform', `translate(0, ${eyeYoffset})`);

const leftEye = eyesG.append('circle')
    .attr('r', eyeRadius)
    .attr('cx', - eyeSpacing)

const rightEye = eyesG.append('circle')
    .attr('r', eyeRadius)
    .attr('cx', + eyeSpacing)
复制代码

第二步嘴巴

嘴巴其实是一个弧线，使用SVG中的path进行绘制。熟悉path的，固然能够直接给参数进行绘制，可是d3对圆弧有更好的支持，能够使用d3.arc函数，方便的绘制圆弧。

arc函数

根据官方的API手册，函数的使用方法以下：

var arc = d3.arc();

arc({
  innerRadius: 0,
  outerRadius: 100,
  startAngle: 0,
  endAngle: Math.PI / 2
}); // "M0,-100A100,100,0,0,1,100,0L0,0Z"
复制代码

其中，innerRadius是内圆半径，outerRadius是外圆半径，startAngle和endAngle分别是开始和结束的弧度（完整的圆是0~2PI）

笑脸的实现

根据以上内容，代码以下：

const mouth = g.append('path')
    .attr('d',d3.arc()({
        innerRadius: 150,
        outerRadius: 170,
        startAngle: Math.PI /2,
        endAngle: Math.PI * 3 / 2
    }))
复制代码

眉毛

眉毛用简单的长方形来代替，也就是svg中的<rect>，使用前文的编程风格，将眉毛归为一个group，并将位置设定。

const eyebrowWidth = 50;
const eyebrowHeight = 10;
const eyebrowYoffset = -150;
const BrowG = g.append('g')
    .attr('transform',`translate(${-eyebrowWidth / 2},${eyebrowYoffset})`);

const leftEyebrow = BrowG.append('rect')
    .attr('width',eyebrowWidth)
    .attr('height',eyebrowHeight)
    .attr('x',-eyeSpacing)

const rightEyebrow = BrowG.append('rect')
    .attr('width', eyebrowWidth)
    .attr('height', eyebrowHeight)
    .attr('x', eyeSpacing)
复制代码

加入动画

使用transition函数设置眉毛的动画，让笑脸动起来

const BrowG = g.append('g')
    .attr('transform',`translate(${-eyebrowWidth / 2},${eyebrowYoffset})`);
BrowG.transition().duration(2000)
    .attr('transform', `translate(${-eyebrowWidth / 2},${eyebrowYoffset - 50})`)
    .transition().duration(2000)
    .attr('transform', `translate(${-eyebrowWidth / 2},${eyebrowYoffset})`).duration(2000)

复制代码

注意点：

transition函数要对号入座，即若是加在了<g>上，对应的增长的属性动画应该在transform上；若是动画在<rect>上，动画应该在y属性上。
添加动画不能在append函数以后链接，好比BrowG.append('g').attr(...).transition()是不行的。由于过分动画没法绑定在append的元素上，须要分别操做。

完整代码

code downlaod here

const svg = d3.select('svg');
const height = +svg.attr('height');
const width = +svg.attr('width');
const g = svg.append('g')
    .attr('transform',`translate(${ width / 2}, ${ height / 2})`)

const circle = g.append('circle')
    .attr('r',height / 2)
    .attr('fill', 'yellow')
    .attr('stroke','black')

const eyeSpacing = 100;
const eyeYoffset = -80
const eyeRadius = 30;
const eyebrowWidth = 50;
const eyebrowHeight = 10;
const eyebrowYoffset = -150;

const eyesG = g.append('g')
    .attr('transform', `translate(0, ${eyeYoffset})`);

const leftEye = eyesG.append('circle')
    .attr('r', eyeRadius)
    .attr('cx', - eyeSpacing)

const rightEye = eyesG.append('circle')
    .attr('r', eyeRadius)
    .attr('cx', + eyeSpacing)

const mouth = g.append('path')
    .attr('d',d3.arc()({
        innerRadius: 150,
        outerRadius: 170,
        startAngle: Math.PI /2,
        endAngle: Math.PI * 3 / 2
    }))

const BrowG = g.append('g')
    .attr('transform',`translate(${-eyebrowWidth / 2},${eyebrowYoffset})`);
BrowG.transition().duration(2000)
    .attr('transform', `translate(${-eyebrowWidth / 2},${eyebrowYoffset - 50})`)
    .transition().duration(2000)
    .attr('transform', `translate(${-eyebrowWidth / 2},${eyebrowYoffset})`).duration(2000)

const leftEyebrow = BrowG.append('rect')
    .attr('width',eyebrowWidth)
    .attr('height',eyebrowHeight)
    .attr('x',-eyeSpacing)

const rightEyebrow = BrowG.append('rect')
    .attr('width', eyebrowWidth)
    .attr('height', eyebrowHeight)
    .attr('x', eyeSpacing)


复制代码