亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間：2022年11月08日 09:41:31   作者：FinGet  
這篇文章主要為大家詳細介紹了如何通過D3.js實現(xiàn)繪制柱狀圖，文中的示例代碼講解詳細，對我們學(xué)習(xí)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)輸出域應(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));

為啥會出現(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 來繪制坐標(biāo)軸
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)文章

最新評論