D3.js實現(xiàn)繪制柱狀圖的教程詳解
更新時間：2022年11月08日 09:41:31 作者：FinGet
這篇文章主要為大家詳細介紹了如何通過D3.js實現(xiàn)繪制柱狀圖，文中的示例代碼講解詳細，對我們學習D3.js有一定的幫助，需要的可以參考一下
在了解了svg和d3的基礎(chǔ)知識以及畫圖最重要的比例尺，接下來就可以開始畫圖表了。本章我們以柱狀圖為例，盡可能的按照圖表的繪制步驟實現(xiàn)下面的柱狀圖。點擊查看demo。
獲取處理數(shù)據(jù)
// 定義數(shù)據(jù)，d3有d3.json 和 d3.csv 獲取json和表格數(shù)據(jù)，后面章節(jié)會涉及
const data = [
{ name: "外包", value: 3000 },
{ name: "金融", value: 4754 },
{ name: "制造", value: 1120 },
{ name: "咨詢", value: 4032 }
];
// 獲取y軸的值
const yValue = (d) => d.value;
// 獲取x軸的值
const xValue = (d) => d.name;
設(shè)置圖表大小位置信息
const dimensions = {
width: 600, // 畫布寬度
height: 600, // 畫布高度
margin: {
top: 15,
right: 15,
bottom: 40,
left: 60
}
}
// 圖表寬度
dimensions.boundedWidth =
dimensions.width - dimensions.margin.left - dimensions.margin.right;
// 圖表高度
dimensions.boundedHeight =
dimensions.height - dimensions.margin.top - dimensions.margin.bottom;
繪制畫布
const svg = d3
.select("#root")
.append("svg")
.attr("width", dimensions.width)
.attr("height", dimensions.height);
創(chuàng)建比例尺
// y軸為線性比例尺
const yScale = d3.scaleLinear()
.domain([0, d3.max(data, (d) => yValue(d))])
.range([dimensions.boundedHeight, 0]);
// d3.max 取最大值，d3.min 取最小值
// 序數(shù)比例尺 可以通過 xScale.bandwidth() 獲取柱狀圖的寬度
const xScale = d3.scaleBand()
.domain(data.map((d) => xValue(d)))
.range([0, dimensions.boundedWidth])
// 顏色比例尺
const color = d3.scaleOrdinal(d3.schemePastel2);
因為y軸是向下,所以range(max, min)輸出域應該由大到小。
繪制數(shù)據(jù)
const chartG = svg
.append("g")
.style("transform",`translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`
);
chartG.selectAll("rect")
.data(data)
.join("rect")
.attr("x", (d) => xScale(xValue(d)))
.attr("y", (d) => yScale(yValue(d)))
.attr("width", xScale.bandwidth())
.attr("height", (d) => yScale(yValue(d)))
.attr("fill", (d, i) => color(i));
為啥會出現(xiàn)上圖的效果：
- y軸從上而下，y的定位
yScale(yValue(d))，range([dimensions.boundedHeight, 0]),值越大，y越小。金融4754是最大值，所以高度為0，看不到 - 由下圖可知，
y + height = boundedHeight，所以height = boundedHeight - y
chartG.selectAll("rect")
.data(data)
.join("rect")
...
.attr("height", (d) => dimensions.boundedHeight - yScale(yValue(d)))
繪制坐標軸
// d3 提供了 axisBottom axisLeft 來繪制坐標軸
const xAxis = d3.axisBottom(xScale);
chartG.append("g")
.call(xAxis)
// x 軸 默認位置在(0,0)，所以需要往下移
.attr("transform", `translate(0, ${dimensions.boundedHeight})`);
const yAxis = d3.axisLeft(yScale);
chartG.append("g").call(yAxis);
優(yōu)化
完成以上步驟一個柱狀圖就算制作好了，剩下的就是可以加一下圖例、交互等優(yōu)化方面的，但是本章先不涉及，我們可以優(yōu)化一下柱狀圖的間距。
const xScale = d3
.scaleBand()
.domain(data.map((d) => xValue(d)))
.range([0, dimensions.boundedWidth])
.padding(0.2); // padding 百分比的值
tickSize 和 nice 屬性
// 我們把 y軸的 刻度線延長(tickSize) const yAxis = d3.axisLeft(yScale).tickSize(-dimensions.boundedWidth);
我們可以看到除了最上面的刻度線的間距，其他的都是均勻的，這是由于我們設(shè)置的最大值是4754,為了美觀我們可以加上nice屬性：
const yScale = d3
.scaleLinear()
.domain([0, d3.max(data, (d) => yValue(d))])
.range([dimensions.boundedHeight, 0])
.nice();
如果域是根據(jù)實際數(shù)據(jù)自動計算的，則開始值和結(jié)束值可能不是整數(shù)。這不一定是個問題，但它可能看起來有點不整潔，因此，d3.nice() 提供一個刻度函數(shù)，它將域四舍五入到一個不錯的值。
到此這篇關(guān)于D3.js實現(xiàn)繪制柱狀圖的教程詳解的文章就介紹到這了,更多相關(guān)D3.js繪制柱狀圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于如何利用JavaScript編寫一個格斗小游戲，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
本文給大家匯總介紹了javascript格式化日期時間的五種常用方法，個人對第五種個性化輸出時間比較有興趣，基本上只要項目中能用到都是使用第五種，推薦給小伙伴們。2015-06-06
JavaScript中的高階函數(shù)是指可以接受其他函數(shù)作為參數(shù)或者返回一個函數(shù)作為結(jié)果的函數(shù)，本文介紹了JS中一些高階函數(shù)的妙用，希望對大家有所幫助2023-05-05
javascript的tab切換原理與效果實現(xiàn)方法
這篇文章主要介紹了javascript的tab切換原理與效果實現(xiàn)方法,實例分析了簡單的tab切換實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)滑動操作代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
本文主要介紹iscroll插件在使用中，遇到select下拉框無法下拉刷新的處理方法，希望能幫到大家。2016-05-05
scrapyd schedule.json setting 傳入多個值問題
這篇文章主要介紹了scrapyd schedule.json setting 傳入多個值，本文給出了問題分析及思路解決方案，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2019-08-08
這篇文章主要介紹了uni-app 組件里面獲取元素寬高的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
這篇文章主要介紹了整理CocosCreator常用知識點，這些知識點，平時幾乎都能用到，希望同學們看完后，可以自己去試一下，加深印象2021-04-04
這篇文章主要介紹了JS復制內(nèi)容到剪切板的實例代碼(兼容IE與火狐)。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11