d3.js實現創建完整柱形圖的代碼介紹

來源：懂視網責編：小采時間：2020-11-27 19:26:47

d3.js實現創建完整柱形圖的代碼介紹

d3.js實現創建完整柱形圖的代碼介紹:本篇文章給大家帶來的內容是關于d3.js實現創建完整柱形圖的代碼介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。d3js.org v5.9.2 之前只是各個部分的demo，現在將各部分整合起來，發現還是學到了不少東西主要是加深了對scale（比

推薦度：

點擊下載本文 文檔為doc格式

導讀d3.js實現創建完整柱形圖的代碼介紹:本篇文章給大家帶來的內容是關于d3.js實現創建完整柱形圖的代碼介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。d3js.org v5.9.2 之前只是各個部分的demo，現在將各部分整合起來，發現還是學到了不少東西主要是加深了對scale（比

本篇文章給大家帶來的內容是關于d3.js實現創建完整柱形圖的代碼介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

d3js.org v5.9.2

之前只是各個部分的demo，現在將各部分整合起來，發現還是學到了不少東西

主要是加深了對scale（比例尺）的理解

代碼

樣式及數據

先是樣式

<style>
 rect {
 fill: pink
 }
 text {
 font-size: 10px;
 }
</style>

接著是數據及柱狀圖寬高等

const
 data = [3, 6, 10, 25],
 barWidth = 100,
 barHeight = 300,
 padding = { //svg留白用
 top: 100,
 right: 100,
 bottom: 100,
 left: 100
 };

創建比例尺

實踐之后對比例尺與坐標軸的理解加深了一點

let barScale = d3.scaleLinear().domain([0, d3.max(data)]).range([0, barHeight]),
 yAxisScale = d3.scaleLinear().domain([d3.max(data), 0]).range([0, barHeight]),//y軸使用線性比例尺，注意domain輸入域
 xAxisScale = d3.scaleBand().domain([1, 2, 3, 4]).range([0, (barWidth - 1) * data.length]); //x軸使用scaleBand比例尺

barScale用于柱形圖創建
yAxisScale用于y軸創建，注意domain()的輸入域，否則刻度數值大小排列會相反
xAxisScale用于x軸創建，使用scaleBand序數比例尺
之前對比例尺的理解太過膚淺，這里也做了幾個小實驗

console.log(`barScale(0)：` + barScale(0));
console.log(`yAxisScale(0)：` + yAxisScale(0));
console.log(`xAxisScale(2)：` + xAxisScale(2));

顯示如下

對于barScale與yAxisScale，輸入域相反，所以映射相反，把一篇他人很棒的總結放于文末

創建柱狀圖

let barContainer = d3.select('.chart')
 .attr('width', data.length * barWidth + padding.left + padding.right)
 .attr('height', barHeight + padding.top + padding.bottom)
 .selectAll('g')
 .data(data).enter().append('g')
 .attr('transform', (d, i) => {
 return 'translate(' + (padding.left + i * barWidth) + ',' + (padding.top + barHeight - barScale(d)) + ')'
 });
barContainer.append('rect')
 .attr('height', d => barScale(d))
 .attr('width', barWidth - 1);
barContainer
 .append('text')
 .text(d => d)
 .attr('y', 10)
 .attr('x', barWidth / 2 - 5);

這里使用了之前定義的padding對象的值進行部分留白

創建坐標軸

/**
 * 創造y軸
 */
let yAxis = d3.axisLeft(yAxisScale);
d3.select('.chart')
 .append('g')
 .attr('transform', 'translate(' + (padding.left - 10) + ',' + padding.top + ') ')
 .call(yAxis);
/**
 * 創建X軸
 */
let xAxis = d3.axisBottom(xAxisScale);
d3.select('.chart')
 .append('g')
 .attr('transform', 'translate(' + (padding.left) + ',' + (padding.top + barHeight) + ')')
 .call(xAxis);

最后創建坐標軸