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

張率功發(fā)布于2019-08-23 14:00 / 2935人閱讀

摘要：簡單理解后的元素需要繼續(xù)進行可視化的工作。當選擇集中的元素個數大于數據集中的元素個數，通過處理之后返回多出來那部分數據的元素選擇器這時候接著執(zhí)行那就是在上了。簡單理解后返回的是一個選擇集，即多出來的那部分元素。

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分別對應矩形的寬和高；
    （本示例的數據可視化通過高度來體現(xiàn)）
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")

結果

可以發(fā)現(xiàn)前兩個矩形的填充顏色和數據并沒有發(fā)生變化，后面的藍色矩形為綁定數據后新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")

結果

結果發(fā)現(xiàn)前兩個矩形不設置相關屬性和值的情況下，也沒有和數據集進行綁定，進行相關的可視化工作。

如果我們在綁定數據后立刻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")

結果

前兩個矩形的顏色發(fā)生了改變。

現(xiàn)在我們改變一下數據集里面數據的個數，看看會發(fā)生什么情況？

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")

結果

我們發(fā)現(xiàn)如果數據集里數據的個數只有一個，那么只有第一個矩形的顏色會改變，第二個為默認的黑色。

那么如果在數據集不變的情況下，我們想改變第二個矩形的顏色該怎么做呢？

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

結果

總結

1.當選擇集中已經有了矩形，再進行綁定數據時，數據集中已經存在的矩形的數據不會根據數據集進行更新，會保持不變。
2.當選擇集與數據集進行綁定是會出現(xiàn)以下情況：
（1）當選擇集中的元素個數小于數據集中的元素個數，d3 會為多出來的 data 生成占位符，通過 enter() 處理之后就可以為這些占位符 append 元素。簡單理解：enter（）后的元素需要繼續(xù)進行可視化的工作。
（2）當選擇集中的元素個數大于數據集中的元素個數，通過 exit() 處理之后返回多出來那部分數據的元素選擇器(這時候接著執(zhí)行 append 那就是在 rect 上 append rect 了)。簡單理解：exit（）后返回的是一個選擇集，即多出來的那部分元素。

云服務器 GPU云服務器柱形圖 jquery flot柱形圖 html5動態(tài)柱形圖 js根據表格數據生成柱形圖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/99929.html

d3.js 創(chuàng)建完整柱形圖

摘要：之前只是各個部分的，現(xiàn)在將各部分整合起來，發(fā)現(xiàn)還是學到了不少東西主要是加深了對比例尺的理解代碼樣式及數據樣式接著是數據及柱狀圖寬高等留白用創(chuàng)建比例尺實踐之后對比例尺與坐標軸的理解加深了一點軸使用線性比例尺，注意輸入域軸使用比例尺用于柱形 d3js.org v5.9.2 之前只是各個部分的demo，現(xiàn)在將各部分整合起來，發(fā)現(xiàn)還是學到了不少東西主要是加深了對scale（比例尺）的理解...

snowLu 2019-08-23 16:44 評論0 收藏0
d3入門篇（四）：繪制完整柱狀圖添加過渡效果

摘要：這篇學習筆記是入門篇的最后一部分，將前幾篇的內容整合到一起，繪制帶過渡效果的柱狀圖，這次先給大家看一下結果圖。這篇學習筆記是入門篇的最后一部分，將前幾篇的內容整合到一起，繪制帶過渡效果的柱狀圖，這次先給大家看一下結果圖。結果 showImg(https://segmentfault.com/img/bVblfGG?w=1230&h=1210); 前言先放結果圖是想反饋一下在整合基...

Jason 2019-08-23 14:08 評論0 收藏0
爬取淘寶上4000條月餅數據，制作了一個酷炫的可視化大屏！

摘要：基于此，我爬取了淘寶上多條月餅的銷售數據，為大家展示了一幅漂亮的可視化大屏，解決大家心目中的問題。模塊的安裝與配置這次爬取淘寶，采用的是最簡單的方式控制瀏覽器進行自動化操作，中途只需要掃碼登陸一次，即可完成整個數據的爬取。 ...

cod7ce 2021-09-04 16:40 評論0 收藏0
d3入門篇（三）：比例尺坐標軸

摘要：為了根據顯示刻度靈活變化寬高，而不是定死，特別是數據差異性很大的時候，我們希望圖表顯示范圍都在畫布里面，這時就會引入比例尺的概念來進行縮放。根據這些規(guī)則，會為我們返回一個比例尺函數。這篇文章繼續(xù)介紹d3的基礎知識比例尺在繪制柱狀圖時，我們往往會定義很大的畫布，然而我們要可視化的數據確很小，這時會出現(xiàn)很多留白的情況。為了根據顯示刻度靈活變化寬高，而不是定死，特別是數據差異性很大的...

tomato 2019-08-23 14:03 評論0 收藏0
d3.js交互圖表

摘要：如果對原生還有比較熟悉的話，的交互很快就能掌握還是拿完整的柱形圖例子修改完整的柱圖通過對元素進行事件綁定或移除，用法很簡單，例如注意這里使用才有指向對應元素用法和原生及幾乎一樣給柱狀圖進行事件綁定這里我們使得鼠標懸浮的柱狀圖顏色變?yōu)橹?，元? d3js v5.9.2 如果對原生JS還有Jq比較熟悉的話，d3的交互很快就能掌握還是拿完整的柱形圖例子修改：完整的柱圖 showImg...

Miracle 2019-08-23 16:46 評論0 收藏0