快捷導(dǎo)航

D3.js實(shí)現(xiàn)繪制柱狀圖的教程詳解

更新時(shí)間：2022年11月08日 09:41:31 作者：FinGet

這篇文章主要為大家詳細(xì)介紹了如何通過(guò)D3.js實(shí)現(xiàn)繪制柱狀圖，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)D3.js有一定的幫助，需要的可以參考一下

獲取處理數(shù)據(jù)

// 定義數(shù)據(jù)，d3有d3.json 和 d3.csv 獲取json和表格數(shù)據(jù)，后面章節(jié)會(huì)涉及
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ù)比例尺 可以通過(guò) xScale.bandwidth() 獲取柱狀圖的寬度
const xScale = d3.scaleBand() 
    .domain(data.map((d) => xValue(d)))
    .range([0, dimensions.boundedWidth])

// 顏色比例尺
const color = d3.scaleOrdinal(d3.schemePastel2);

因?yàn)閥軸是向下,所以range(max, min)輸出域應(yīng)該由大到小。

繪制數(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));

為啥會(huì)出現(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)))

繪制坐標(biāo)軸

// d3 提供了 axisBottom axisLeft 來(lái)繪制坐標(biāo)軸
const xAxis = d3.axisBottom(xScale);

chartG.append("g")
    .call(xAxis)
    // x 軸 默認(rèn)位置在(0,0)，所以需要往下移
    .attr("transform", `translate(0, ${dimensions.boundedHeight})`);

const yAxis = d3.axisLeft(yScale);
chartG.append("g").call(yAxis);

優(yōu)化

完成以上步驟一個(gè)柱狀圖就算制作好了，剩下的就是可以加一下圖例、交互等優(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軸的 刻度線延長(zhǎng)(tickSize)
const yAxis = d3.axisLeft(yScale).tickSize(-dimensions.boundedWidth);

我們可以看到除了最上面的刻度線的間距，其他的都是均勻的，這是由于我們?cè)O(shè)置的最大值是4754,為了美觀我們可以加上nice屬性：

const yScale = d3
    .scaleLinear()
    .domain([0, d3.max(data, (d) => yValue(d))])
    .range([dimensions.boundedHeight, 0])
    .nice();

如果域是根據(jù)實(shí)際數(shù)據(jù)自動(dòng)計(jì)算的，則開(kāi)始值和結(jié)束值可能不是整數(shù)。這不一定是個(gè)問(wèn)題，但它可能看起來(lái)有點(diǎn)不整潔，因此，d3.nice() 提供一個(gè)刻度函數(shù)，它將域四舍五入到一個(gè)不錯(cuò)的值。