成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

d3.js 創(chuàng)建完整柱形圖

snowLu / 911人閱讀

摘要：之前只是各個(gè)部分的，現(xiàn)在將各部分整合起來(lái)，發(fā)現(xiàn)還是學(xué)到了不少東西主要是加深了對(duì)比例尺的理解代碼樣式及數(shù)據(jù)樣式接著是數(shù)據(jù)及柱狀圖寬高等留白用創(chuàng)建比例尺實(shí)踐之后對(duì)比例尺與坐標(biāo)軸的理解加深了一點(diǎn)軸使用線性比例尺，注意輸入域軸使用比例尺用于柱形

d3js.org v5.9.2
之前只是各個(gè)部分的demo，現(xiàn)在將各部分整合起來(lái)，發(fā)現(xiàn)還是學(xué)到了不少東西
主要是加深了對(duì)scale（比例尺）的理解

代碼 html、樣式及數(shù)據(jù)

html

樣式

接著是數(shù)據(jù)及柱狀圖寬高等

const
    data = [3, 6, 10, 25],
    barWidth = 100,
    barHeight = 300,
    padding = { //svg留白用
        top: 100,
        right: 100,
        bottom: 100,
        left: 100
    };
創(chuàng)建比例尺

實(shí)踐之后對(duì)比例尺與坐標(biāo)軸的理解加深了一點(diǎn)

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用于柱形圖創(chuàng)建
yAxisScale用于y軸創(chuàng)建，注意domain()的輸入域，否則刻度數(shù)值大小排列會(huì)相反
xAxisScale用于x軸創(chuàng)建，使用scaleBand序數(shù)比例尺
之前對(duì)比例尺的理解太過(guò)膚淺，這里也做了幾個(gè)小實(shí)驗(yàn)

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

顯示如下

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

創(chuàng)建柱狀圖 
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對(duì)象的值進(jìn)行部分留白

創(chuàng)建坐標(biāo)軸 
/**
 * 創(chuàng)造y軸
 */
let yAxis = d3.axisLeft(yAxisScale);
d3.select(".chart")
    .append("g")
    .attr("transform", "translate(" + (padding.left - 10) + "," + padding.top + ") ")
    .call(yAxis);
/**
 * 創(chuàng)建X軸
 */
let xAxis = d3.axisBottom(xAxisScale);
d3.select(".chart")
    .append("g")
    .attr("transform", "translate(" + (padding.left) + "," + (padding.top + barHeight) + ")")
    .call(xAxis);

最后創(chuàng)建坐標(biāo)軸

總結(jié)

對(duì)之前學(xué)的東西做了一次結(jié)合，還有很多地方待提升
不足請(qǐng)大佬指出

參考資料

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103221.html

相關(guān)文章

  • d3.js交互圖表

    摘要：如果對(duì)原生還有比較熟悉的話，的交互很快就能掌握還是拿完整的柱形圖例子修改完整的柱圖通過(guò)對(duì)元素進(jìn)行事件綁定或移除，用法很簡(jiǎn)單，例如注意這里使用才有指向?qū)?yīng)元素用法和原生及幾乎一樣給柱狀圖進(jìn)行事件綁定這里我們使得鼠標(biāo)懸浮的柱狀圖顏色變?yōu)橹?，元? d3js v5.9.2 如果對(duì)原生JS還有Jq比較熟悉的話，d3的交互很快就能掌握 還是拿完整的柱形圖例子修改：完整的柱圖 showImg...

    Miracle 評(píng)論0 收藏0

  • 常用的數(shù)據(jù)可視化工具

    摘要：俗話說(shuō)，不會(huì)使用工具來(lái)完成任務(wù)的都是進(jìn)化不完全的表現(xiàn)，大數(shù)據(jù)時(shí)代，可視化已經(jīng)深深鉆進(jìn)我們的生活，使用可視化工具也變的相當(dāng)普遍，今天我們來(lái)總結(jié)下當(dāng)下可視化工具都有哪些。是一個(gè)地圖庫(kù)，主要面向數(shù)據(jù)可視化用戶。 俗話說(shuō)，不會(huì)使用工具來(lái)完成任務(wù)的都是進(jìn)化不完全的表現(xiàn)，大數(shù)據(jù)時(shí)代，可視化已經(jīng)深深鉆進(jìn)我們的生活，使用可視化工具也變的相當(dāng)普遍，今天我們來(lái)總結(jié)下當(dāng)下可視化工具都有哪些。 showImg...

    philadelphia 評(píng)論0 收藏0

  • d3.js入門——selection與創(chuàng)建條形圖

    摘要：入門，根據(jù)官網(wǎng)部分教程學(xué)習(xí)，發(fā)現(xiàn)因?yàn)榘姹靖?，有些和概念可能不適用，但總體思想未變。 入門d3.js，根據(jù)官網(wǎng)部分教程學(xué)習(xí)，發(fā)現(xiàn)因?yàn)榘姹靖拢行゛pi和概念可能不適用，但總體思想未變。本文思路跟隨此篇blogLet’s Make a Bar Chart學(xué)習(xí)，加上自己的理解，并且查閱了部分更新資料 元素選擇 d3通過(guò)d3.select()或者d3.selectAll()獲取元素，這兩個(gè)...

    yanbingyun1990 評(píng)論0 收藏0

  • Excelize發(fā)布2.0.1版本，Go語(yǔ)言Excel文檔基礎(chǔ)庫(kù)

    摘要：是語(yǔ)言編寫(xiě)的用于操作文檔類庫(kù)，基于標(biāo)準(zhǔn)?？梢允褂盟鼇?lái)讀取寫(xiě)入由及以上版本創(chuàng)建的文檔。年月日，社區(qū)正式發(fā)布了版本，該版本包含了多項(xiàng)新增功能錯(cuò)誤修復(fù)和兼容性提升優(yōu)化。下面是有關(guān)該版本更新內(nèi)容的摘要，完整的更改列表可查看。 showImg(https://segmentfault.com/img/remote/1460000018971694?w=880&h=360); Excelize 是...

    oliverhuang 評(píng)論0 收藏0

  • d3入門篇（二）：繪制基本的柱形圖

    摘要：簡(jiǎn)單理解后的元素需要繼續(xù)進(jìn)行可視化的工作。當(dāng)選擇集中的元素個(gè)數(shù)大于數(shù)據(jù)集中的元素個(gè)數(shù)，通過(guò)處理之后返回多出來(lái)那部分?jǐn)?shù)據(jù)的元素選擇器這時(shí)候接著執(zhí)行那就是在上了。簡(jiǎn)單理解后返回的是一個(gè)選擇集，即多出來(lái)的那部分元素。 d3簡(jiǎn)單理解就是通過(guò)在svg畫(huà)布上繪制基本圖形，本文將介紹d3繪制基本的柱形圖 繪制畫(huà)布 import * as d3 from d3; var width=300;//svg...

    張率功 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<