中国体彩网唯一官网
首頁 > web前端 > js教程 > 正文

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

轉載 2019-04-04 16:47:30 0 987
第六期線上培訓班
本篇文章給大家帶來的內容是關于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));

顯示如下

4085942393-5ca5a52a87351_articlex.png

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

創建柱狀圖

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

最后創建坐標軸

3156082366-5ca5a5341d4c3_articlex.png

【相關推薦:JavaScript視頻教程

以上就是d3.js實現創建完整柱形圖的代碼介紹的詳細內容,更多請關注php中文網其它相關文章!

php中文網最新課程二維碼
  • 相關標簽:d3.js javascript
  • 本文轉載于:segmentfault,如有侵犯,請聯系刪除
  • 相關文章


  • 在D3.js中如何創建物流地圖(詳細教程)
  • D3.js做出內存圓形儲存圖
  • 使用AngularJS2與D3.js集成如何實現自定義可視化
  • 如何用D3.js實現拓撲圖
  • d3.js實現創建完整柱形圖的代碼介紹
  • 網友評論

    文明上網理性發言,請遵守 新聞評論服務協議

    我要評論
    獨孤九賤(5)_ThinkPHP5視頻教程

    獨孤九賤(5)_ThinkPHP5視頻教程

    ThinkPHP是國內最流行的中文PHP開發框架,也是您Web項目的最佳選擇。《php.cn獨孤九賤(5)-ThinkPHP5視頻教程》課程以ThinkPHP5最新版本為例,從最基本的框架常識開始,將...

    獨孤九賤(4)_PHP視頻教程

    獨孤九賤(4)_PHP視頻教程

    江湖傳言:PHP是世界上最好的編程語言。真的是這樣嗎?這個梗究竟是從哪來的?學會本課程,你就會明白了。 PHP中文網出品的PHP入門系統教學視頻,完全從初學者的角度出發,絕不玩虛的,一切以實用、有用...

    獨孤九賤(1)_HTML5視頻教程

    獨孤九賤(1)_HTML5視頻教程

    《php.cn原創html5視頻教程》課程特色:php中文網原創幽默段子系列課程,以惡搞,段子為主題風格的php視頻教程!輕松的教學風格,簡短的教學模式,讓同學們在不知不覺中,學會了HTML知識。 ...

    ThinkPHP5實戰之[教學管理系統]

    ThinkPHP5實戰之[教學管理系統]

    本套教程,以一個真實的學校教學管理系統為案例,手把手教會您如何在一張白紙上,從零開始,一步一步的用ThinkPHP5框架快速開發出一個商業項目。

    PHP入門視頻教程之一周學會PHP

    PHP入門視頻教程之一周學會PHP

    所有計算機語言的學習都要從基礎開始,《PHP入門視頻教程之一周學會PHP》不僅是PHP的基礎部分更主要的是PHP語言的核心技術,是學習PHP必須掌握的內容,任何PHP項目的實現都離不開這部分的內容,通...

    作者信息

    不言

    認證0級講師

    最近文章
    ctrl加什么是保存? 380
    PS中ctrl+t是什么快捷鍵? 527
    PS標尺怎么用? 1010

    相關視頻教程

  • javascript初級視頻教程 javascript初級視頻教程
  • jquery 基礎視頻教程 jquery 基礎視頻教程
  • javascript三級聯動視頻教程 javascript三級聯動視頻教程
  • 獨孤九賤(3)_JavaScript視頻教程 獨孤九賤(3)_JavaScript視頻教程
  • 獨孤九賤(6)_jQuery視頻教程 獨孤九賤(6)_jQuery視頻教程
  • 相關視頻章節

    第六期線上培訓班 中国体彩网唯一官网