成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

snowLu / 954人閱讀

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

d3js.org v5.9.2
之前只是各個部分的demo，現(xiàn)在將各部分整合起來，發(fā)現(xiàn)還是學(xué)到了不少東西
主要是加深了對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)建比例尺

實踐之后對比例尺與坐標(biāo)軸的理解加深了一點

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ù)值大小排列會相反
xAxisScale用于x軸創(chuàng)建，使用scaleBand序數(shù)比例尺
之前對比例尺的理解太過膚淺，這里也做了幾個小實驗

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

顯示如下

對于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對象的值進(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é)

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

參考資料

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/103221.html

相關(guān)文章

  • d3.js交互圖表

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

    Miracle 評論0 收藏0

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

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

    philadelphia 評論0 收藏0

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

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

    yanbingyun1990 評論0 收藏0

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

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

    oliverhuang 評論0 收藏0

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

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

    張率功 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<