d3入門篇（二）：繪製基本的柱形圖

d3簡單理解就是經過在svg畫布上繪製基本圖形，本文將介紹d3繪製基本的柱形圖

繪製畫布

import * as d3 from "d3";
var width=300;//svg畫布寬
var height=200;//svg畫布高
//定義畫布
var svg=d3.select("body")
    .append("svg")
    .attr("width",width)
    .attr("height",height)
    .style("background-color","yellow")

繪製矩形

var rectWidth=30;//每一個矩形的默認寬度
svg.append("rect")
.attr("width",rectWidth-2)
.attr("height",40)
.attr("x",0)
.attr("y",200)
.attr("transform",`translate(0,${-40})`)

svg.append("rect")
.attr("width",rectWidth-2)
.attr("height",20)
.attr("x",rectWidth)
.attr("y",200)
.attr("transform",`translate(0,${-20})`)

結果

總結

1.畫布上的座標軸方向：
    x軸方向爲水平向右；
    y軸方向爲垂直向下；
2.矩形的基本屬性：
    x,y分別對應矩形左上角的座標軸；
    width，height分別對應矩形的寬和高；
    （本示例的數據可視化經過高度來體現）
3.因爲默認的y軸方向爲垂直向下，因此爲了繪製柱形圖，咱們須要經過attr矩形的transform屬性對矩形進行翻轉；
4.默認的矩形填充顏色爲黑色；

綁定數據

var dataset=[45,70,12,79,4,127,33,90];
svg.selectAll("rect")
.data(dataset)
// .attr("fill","white")
.enter()
.append("rect")
.attr("width",rectWidth-2)
.attr("height",function (d,i) {
     return d
})
.attr("x",function (d,i) {
      return rectWidth*i
})
.attr("y",200)
.attr("transform",function (d,i) {
    return `translate(0,${-d})`
})
.attr("fill","blue")

結果

能夠發現前兩個矩形的填充顏色和數據並無發生變化，後面的藍色矩形爲綁定數據後新append的元素；

若是前兩個矩形咱們不設置高度，是否會經過數據集綁定上相關數據呢？

svg.append("rect")
svg.append("rect")
var dataset=[45,70,12,79,4,127,33,90];
svg.selectAll("rect")
.data(dataset)
// .attr("fill","white")
.enter()
.append("rect")
.attr("width",rectWidth-2)
.attr("height",function (d,i) {
     return d
})
.attr("x",function (d,i) {
      return rectWidth*i
})
.attr("y",200)
.attr("transform",function (d,i) {
    return `translate(0,${-d})`
})
.attr("fill","blue")

結果

結果發現前兩個矩形不設置相關屬性和值的狀況下，也沒有和數據集進行綁定，進行相關的可視化工做。

若是咱們在綁定數據後馬上attr矩形的屬性呢？是否會有所改變呢？

svg.append("rect")
.attr("width",rectWidth-2)
.attr("height",40)
.attr("x",0)
.attr("y",200)
.attr("transform",`translate(0,${-40})`)

svg.append("rect")
.attr("width",rectWidth-2)
.attr("height",20)
.attr("x",rectWidth)
.attr("y",200)
.attr("transform",`translate(0,${-20})`)

var dataset=[45,70,12,79,4,127,33,90];

svg.selectAll("rect")
.data(dataset)
.attr("fill","pink")
.enter()
.append("rect")
.attr("width",rectWidth-2)
.attr("height",function (d,i) {
     return d
})
.attr("x",function (d,i) {
      return rectWidth*i
})
.attr("y",200)
.attr("transform",function (d,i) {
    return `translate(0,${-d})`
})
.attr("fill","blue")

結果

前兩個矩形的顏色發生了改變。

如今咱們改變一下數據集裏面數據的個數，看看會發生什麼狀況？

var dataset=[45];
//,70,12,79,4,127,33,90
svg.selectAll("rect")
.data(dataset)
.attr("fill","pink")
.enter()
.append("rect")
.attr("width",rectWidth-2)
.attr("height",function (d,i) {
     return d
})
.attr("x",function (d,i) {
      return rectWidth*i
})
.attr("y",200)
.attr("transform",function (d,i) {
    return `translate(0,${-d})`
})
.attr("fill","blue")

結果

咱們發現若是數據集裏數據的個數只有一個，那麼只有第一個矩形的顏色會改變，第二個爲默認的黑色。

那麼若是在數據集不變的狀況下，咱們想改變第二個矩形的顏色該怎麼作呢？

//這裏咱們使用exit()
svg.selectAll("rect")
.data(dataset)
.attr("fill","pink")
.exit()
.attr("fill","red")

結果

總結

1.當選擇集中已經有了矩形，再進行綁定數據時，數據集中已經存在的矩形的數據不會根據數據集進行更新，會保持不變。
2.當選擇集與數據集進行綁定是會出現如下狀況：
（1）當選擇集中的元素個數 小於 數據集中的元素個數，d3 會爲多出來的 data 生成佔位符，經過 enter() 處理以後就能夠爲這些佔位符 append 元素。簡單理解：enter（）後的元素須要繼續進行可視化的工做。
（2）當選擇集中的元素個數 大於 數據集中的元素個數，經過 exit() 處理以後返回多出來那部分數據的元素選擇器(這時候接着執行 append 那就是在 rect 上 append rect 了)。簡單理解：exit（）後返回的是一個選擇集，即多出來的那部分元素。