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)


複製代碼