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介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。