欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

D3.js實(shí)現(xiàn)餅圖,環(huán)圖,玫瑰圖的繪制

 更新時(shí)間:2022年11月08日 09:04:11   作者:FinGet  
這篇文章主要為大家介紹了如何利用D3.js中的d3.pie和d3.arc實(shí)現(xiàn)餅圖、環(huán)圖和玫瑰圖的繪制,文中的實(shí)現(xiàn)方法講解詳細(xì),感興趣的可以嘗試一下

餅圖和之前介紹的柱狀圖和折線圖不同,不存在坐標(biāo)系,也就不會(huì)有比例尺的映射。在折線圖的介紹中,我們提到了d3提供了一些圖形構(gòu)造器并了解了一下d3.line以及d3.area,而餅圖會(huì)用到另外倆個(gè)構(gòu)造方法d3.pied3.arc。

d3.pie

d3.pie為給定的數(shù)據(jù)生成一個(gè)餅圖,返回一個(gè)包含每個(gè)數(shù)據(jù)對(duì)應(yīng)的弧角的對(duì)象數(shù)組。

const data = [
    { name: "外包", value: 3000 },
    { name: "金融", value: 4754 },
    { name: "制造", value: 1120 },
    { name: "咨詢", value: 4032 }
];

const pieData = d3.pie().value((d) => d.value)(data)

console.log(pieData)

  • data - 當(dāng)前數(shù)據(jù)
  • value - 數(shù)據(jù)對(duì)應(yīng)的值
  • index - 弧從零開始的排序索引
  • startAngle - 開始弧度
  • endAngle - 結(jié)束弧度
  • padAngle - 每個(gè)弧形間的間距(弧度)

對(duì)于對(duì)象數(shù)組需要通過value屬性,指定取值對(duì)象。也可以通過sort對(duì)數(shù)據(jù)進(jìn)行排序.

d3.area

const arc = d3.arc()
    .innerRadius(0)
    .outerRadius(100)
    .startAngle(0)
    .endAngle(Math.PI / 2);
arc(); // "M0,-100A100,100,0,0,1,100,0L0,0Z"

  • innerRadius - 內(nèi)邊距
  • outerRadius - 外邊距
  • startAngle - 開始弧度
  • startAngle - 結(jié)束弧度
  • padAngle - 每個(gè)弧形間的間距(弧度)

對(duì)比d3.pie返回的數(shù)據(jù)和d3.area的屬性,就可以發(fā)現(xiàn)它們是天生的一對(duì),就該成對(duì)出現(xiàn)。

餅圖

了解了de.pied3.arc,我們就可以輕松的繪制出餅圖了。 點(diǎn)擊查看Demo!

const pieData = d3.pie()
    .value((d) => d.value)
    .sort((a, b) => a.value - b.value)(data);

const arc = d3.arc().innerRadius(0).outerRadius(100);
const color = d3.scaleOrdinal(d3.schemeCategory10);

const arcGroup = svg.append("g")
    .attr("transform", "translate(300, 300)")
    .selectAll("path")
    .data(pieData);

arcGroup.join("path")
    .attr("fill", (d, i) => color(i))
    .attr("d", arc);

這里加了文字說明,本章不做介紹,大家可以查看Demo了解,需要注意一點(diǎn)的是弧度與角度的轉(zhuǎn)換:角度 = 弧度 * 180 / Math.PI

環(huán)圖

環(huán)圖很簡單,加上內(nèi)邊距就變成了環(huán)圖:

const arc = d3.arc().innerRadius(30).outerRadius(100);

玫瑰圖

玫瑰圖就是餅圖的一種變形,每個(gè)數(shù)據(jù)根據(jù)數(shù)值的大小,環(huán)形的半徑不一樣,也就是outerRadius是動(dòng)態(tài)設(shè)置的。

const allCount = data.reduce((pre, cur) => pre + cur.value, 0);

const roseArc = d3.arc()
    .innerRadius(0)
    .outerRadius((d) => {
        return (d.value / allCount) * 100 + 100;
    });

還可以加一個(gè)圓角效果:

const roseArc = d3.arc()
    .innerRadius(0)
    .outerRadius((d) => {
        return (d.value / allCount) * 100 + 100;
    })
    .cornerRadius(16); // 圓角

總結(jié)

總的來說餅圖的實(shí)現(xiàn)比較簡單,通過d3.pie處理數(shù)據(jù),構(gòu)造出包含開始、結(jié)束弧度的數(shù)據(jù),再通過d3.arc構(gòu)建一個(gè)圓弧的path,就可以繪制出整個(gè)餅圖,環(huán)圖和玫瑰圖也只是基于餅圖的一個(gè)變形。

到此這篇關(guān)于D3.js實(shí)現(xiàn)餅圖,環(huán)圖,玫瑰圖的繪制的文章就介紹到這了,更多相關(guān)D3.js繪制餅圖 環(huán)圖 玫瑰圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • js讓一行頁腳保持在底部

    js讓一行頁腳保持在底部

    所謂保持在底部就是: 在內(nèi)容不超過一屏的情況下, 當(dāng)瀏覽器窗口變小那行頁腳文字會(huì)跟著向上浮動(dòng)但還是保持在底部。當(dāng)內(nèi)容多出一屏?xí)r,他顯示在網(wǎng)頁的最下邊,而不是窗口的最下邊;
    2008-04-04
  • BootStrap 智能表單實(shí)戰(zhàn)系列(二)BootStrap支持的類型簡介

    BootStrap 智能表單實(shí)戰(zhàn)系列(二)BootStrap支持的類型簡介

    這篇文章主要介紹了BootStrap 智能表單實(shí)戰(zhàn)系列(二)BootStrap支持的類型簡介 的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧
    2016-06-06
  • JS折半插入排序算法實(shí)例

    JS折半插入排序算法實(shí)例

    這篇文章主要介紹了JS折半插入排序算法,以完整實(shí)例形式較為詳細(xì)的分析了JavaScript實(shí)現(xiàn)折半插入排序的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-12-12
  • javascript實(shí)現(xiàn)頁面內(nèi)關(guān)鍵詞高亮顯示代碼

    javascript實(shí)現(xiàn)頁面內(nèi)關(guān)鍵詞高亮顯示代碼

    關(guān)鍵詞高亮想必大家對(duì)它都不陌生吧,應(yīng)用也比較廣泛的,下面為大家介紹下通過javascript是如何實(shí)現(xiàn)頁面內(nèi)關(guān)鍵詞高亮顯示
    2014-04-04
  • 第二章之Bootstrap 頁面排版樣式

    第二章之Bootstrap 頁面排版樣式

    Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它簡潔靈活,使得 Web 開發(fā)更加快捷。本文給大家介紹Bootstrap 頁面排版樣式的相關(guān)知識(shí),希望對(duì)大家有所幫助!
    2016-04-04
  • JavaScript編碼風(fēng)格精選指南(編寫可維護(hù)的代碼規(guī)范)

    JavaScript編碼風(fēng)格精選指南(編寫可維護(hù)的代碼規(guī)范)

    javascript編碼規(guī)范能夠增強(qiáng)代碼的簡潔性、可讀性、可擴(kuò)展性,項(xiàng)目做到后期,每修改一次,所耗費(fèi)的成本就越高,編碼規(guī)范能節(jié)省這樣的成本,并且能很好拓展升級(jí)原有系統(tǒng)功能,javascript編碼規(guī)范也是開源社區(qū)大家約定俗成的規(guī)則!
    2024-06-06
  • 詳談JS中實(shí)現(xiàn)種子隨機(jī)數(shù)及作用

    詳談JS中實(shí)現(xiàn)種子隨機(jī)數(shù)及作用

    這篇文章詳細(xì)介紹了種子隨機(jī)數(shù)在JS中如何實(shí)現(xiàn)以及有什么作用,希望能幫助有需要的人。下面一起來看看。
    2016-07-07
  • 使用JavaScript解決網(wǎng)頁圖片拉伸問題(推薦)

    使用JavaScript解決網(wǎng)頁圖片拉伸問題(推薦)

    本文給大家介紹使用javascript解決網(wǎng)頁圖片拉伸問題,本文給大家介紹的非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧
    2016-11-11
  • 解決微信小程序scroll-view組件無橫向滾動(dòng)的問題

    解決微信小程序scroll-view組件無橫向滾動(dòng)的問題

    這篇文章主要介紹了微信小程序scroll-view組件無橫向滾動(dòng)的解決方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-02-02
  • javascript getElementsByClassName函數(shù)

    javascript getElementsByClassName函數(shù)

    今天在腳本中應(yīng)用到了根據(jù)類名取元素的方法,卻對(duì)其效率不甚滿意。于是,小幅修改了其探測元素類名的方法,提升了約3成的效率.
    2010-04-04

最新評(píng)論