d3.js 創建完整柱形圖

snowLu 發布于2019-08-23 16:44 / 882人閱讀

摘要：之前只是各個部分的，現在將各部分整合起來，發現還是學到了不少東西主要是加深了對比例尺的理解代碼樣式及數據樣式接著是數據及柱狀圖寬高等留白用創建比例尺實踐之后對比例尺與坐標軸的理解加深了一點軸使用線性比例尺，注意輸入域軸使用比例尺用于柱形

d3js.org v5.9.2
之前只是各個部分的demo，現在將各部分整合起來，發現還是學到了不少東西
主要是加深了對scale（比例尺）的理解

代碼 html、樣式及數據

html

樣式

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

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

最后創建坐標軸

總結

對之前學的東西做了一次結合，還有很多地方待提升
不足請大佬指出

參考資料

D3中常用的比例尺
完整的柱形圖

GPU云服務器云服務器柱形圖 jquery flot柱形圖 html5動態柱形圖 js根據表格數據生成柱形圖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103221.html

d3.js交互圖表

摘要：如果對原生還有比較熟悉的話，的交互很快就能掌握還是拿完整的柱形圖例子修改完整的柱圖通過對元素進行事件綁定或移除，用法很簡單，例如注意這里使用才有指向對應元素用法和原生及幾乎一樣給柱狀圖進行事件綁定這里我們使得鼠標懸浮的柱狀圖顏色變為中，元素 d3js v5.9.2 如果對原生JS還有Jq比較熟悉的話，d3的交互很快就能掌握還是拿完整的柱形圖例子修改：完整的柱圖 showImg...

Miracle 2019-08-23 16:46 評論0 收藏0
常用的數據可視化工具

摘要：俗話說，不會使用工具來完成任務的都是進化不完全的表現，大數據時代，可視化已經深深鉆進我們的生活，使用可視化工具也變的相當普遍，今天我們來總結下當下可視化工具都有哪些。是一個地圖庫，主要面向數據可視化用戶。俗話說，不會使用工具來完成任務的都是進化不完全的表現，大數據時代，可視化已經深深鉆進我們的生活，使用可視化工具也變的相當普遍，今天我們來總結下當下可視化工具都有哪些。 showImg...

philadelphia 2019-08-22 11:06 評論0 收藏0
d3.js入門——selection與創建條形圖

摘要：入門，根據官網部分教程學習，發現因為版本更新，有些和概念可能不適用，但總體思想未變。入門d3.js，根據官網部分教程學習，發現因為版本更新，有些api和概念可能不適用，但總體思想未變。本文思路跟隨此篇blogLet’s Make a Bar Chart學習，加上自己的理解，并且查閱了部分更新資料元素選擇 d3通過d3.select()或者d3.selectAll()獲取元素，這兩個...

yanbingyun1990 2019-08-23 16:18 評論0 收藏0
Excelize發布2.0.1版本，Go語言Excel文檔基礎庫

摘要：是語言編寫的用于操作文檔類庫，基于標準。可以使用它來讀取寫入由及以上版本創建的文檔。年月日，社區正式發布了版本，該版本包含了多項新增功能錯誤修復和兼容性提升優化。下面是有關該版本更新內容的摘要，完整的更改列表可查看。 showImg(https://segmentfault.com/img/remote/1460000018971694?w=880&h=360); Excelize 是...

oliverhuang 2019-08-27 10:57 評論0 收藏0
d3入門篇（二）：繪制基本的柱形圖

摘要：簡單理解后的元素需要繼續進行可視化的工作。當選擇集中的元素個數大于數據集中的元素個數，通過處理之后返回多出來那部分數據的元素選擇器這時候接著執行那就是在上了。簡單理解后返回的是一個選擇集，即多出來的那部分元素。 d3簡單理解就是通過在svg畫布上繪制基本圖形，本文將介紹d3繪制基本的柱形圖繪制畫布 import * as d3 from d3; var width=300;//svg...

張率功 2019-08-23 14:00 評論0 收藏0