深入淺出d3.js數(shù)據(jù)可視化之道(3)

上一節(jié)中瓢阴, 我們對于svg 的坐標(biāo)系統(tǒng) 和 常用的比例尺進(jìn)行了學(xué)習(xí), 了解了坐標(biāo)軸的建立健无,懂得了數(shù)據(jù)綁定和事件回調(diào)在d3中的應(yīng)用荣恐。同時也實現(xiàn)了一些常用的交互事件, 例如點擊和框選配合柱狀圖使用累贤。這一節(jié)叠穆,我們將繼續(xù)以以做帶學(xué)的方式對d3.js進(jìn)行學(xué)習(xí)。

目標(biāo):制作餅圖臼膏,并給它添加一些相應(yīng)的動畫和交互事件硼被。

在餅圖制作之前,先介紹幾個知識點:

布局

布局(layout)渗磅,這是d3中很重要的概念嚷硫,從 字面看像是繪制的意思,然而事實上它真正的含義應(yīng)該叫 數(shù)據(jù)轉(zhuǎn)換始鱼。

舉個例子仔掸,[100, 200, 150, 240]這樣一組數(shù)據(jù),直接繪制餅圖是不行的医清,需要把它轉(zhuǎn)換成“起始角度”和“終止角度”起暮。因此蹦骑,布局的意義就在于把數(shù)據(jù)轉(zhuǎn)換為方便繪圖的數(shù)據(jù)进胯。

d3一共提供了12個布局安券,它們分別是

  • 樹形圖 Tree
  • 力導(dǎo)向圖 Force
  • 弦圖 Chord
  • 餅狀圖 Pie (接下來會用到的布局)
  • 集群圖 Cluster
  • 捆圖 Bundle
  • 打包圖 Pack
  • 直方圖 Histogrom
  • 分區(qū)圖 Partition
  • 堆棧圖 Stack
  • 矩陣樹圖 TreeMap
  • 層級圖 Hierarchy

布局的使用遵循以下步驟:

  1. 確定初始數(shù)據(jù) 2.轉(zhuǎn)換數(shù)據(jù) 3.繪制

弧生成器

餅狀圖又稱餅圖话告,通過將圓切分為幾個扇形來描述數(shù)量和百分比的關(guān)系排截。
餅狀圖布局能夠根據(jù)一系列數(shù)據(jù)生成一系列對象晃跺,每個對象都包含起始角度和終止角度等一些繪圖所需要的數(shù)據(jù)劫樟。 在此之前楷怒,可以先使用生成好的數(shù)據(jù)葫盼,看扇形的每個弧是如何生成出來的残腌。

在繪制最簡dome時,先了解一下弧圖常用的 起始角度訪問器startAngle, 終止角度訪問器endAngle, 內(nèi)半徑訪問器innerWith和外半徑訪問器outerWidth各代表了哪段距離

弧生成器各參數(shù)意義

首先只繪制一段弦

            var dataset = { startAngle: 0, endAngle: Math.PI * 0.75}

            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", 300)
                        .attr("height", 300)

            //創(chuàng)建一個弧生成器
            var arcPath = d3.arc()
                            .innerRadius(50)
                            .outerRadius(100)
            
            //添加路徑
            svg.append("path")
                .attr("d", arcPath(dataset))
                .attr("transform", "translate(150, 150)")
                .attr("stroke", "black")
                .attr("stroke-width", "2px")
                .attr("fill", "yellow")

效果如下


生成的弦

接下來使用多組數(shù)據(jù)生成一個完整的弧 >>>>>

準(zhǔn)備的數(shù)據(jù)

var dataset = [ { startAngle: 0, endAngle: Math.PI * 0.6 },
                { startAngle: Math.PI * 0.6, endAngle: Math.PI },
                { startAngle: Math.PI, endAngle: Math.PI * 1.2 },
                { startAngle: Math.PI * 1.2, endAngle: Math.PI *2 }
             ]

代碼部分

var svg = d3.select("body")
                .append("svg")
                .attr("width", 500)
                .attr("height", 500)

 //創(chuàng)建一個弧生成器
var arcPath = d3.arc().innerRadius(50).outerRadius(100)
            
var color = d3.scaleOrdinal(d3.schemeCategory20)  // d3內(nèi)置的序數(shù)比例尺贫导,里面包含著各種經(jīng)過設(shè)計師篩選的顏色可供選擇

//添加路徑
var arcs = svg.selectAll("path")
                       .data(dataset)
                       .enter()
                       .append("path")
                       .attr("d", function(d){ return arcPath(d) } )  // 生成弧
                       .attr("transform", "translate(150, 150)")     //一般都是 width/2 和 height/2 把角度中心偏移到svg畫布中心
                       .attr("stroke", "black")
                       .attr("stroke-width", "0px")
                       .attr("fill", function(d, i){ return color(i) } )

效果如下


效果

了解了兩個基本的概念抛猫,接下來開始使用布局和弦生成器制作餅圖

準(zhǔn)備的數(shù)據(jù)
const data = [
    ["香蕉", 150],
    ["蘋果", 200],
    ["菠蘿", 190],
    ["南瓜", 250],
    ["雪梨", 350],
    ["西紅柿", 190]
 ]
基礎(chǔ)設(shè)置及數(shù)據(jù)處理
 const width = 300 
 const height = 300
          
var svg = d3.select("body")
                .append("svg")
                .attr("width", width)
                .attr("height",height)

 // 進(jìn)行數(shù)據(jù)轉(zhuǎn)換
 var pie =d3.pie()
            .sort(null)
            .value(function(d){ return d[1] })
                      
var pieData = pie(data)
console.log(pieData)

原始數(shù)據(jù)經(jīng)過餅狀布局轉(zhuǎn)換之后

布局轉(zhuǎn)換之后的數(shù)據(jù)

轉(zhuǎn)換之后的數(shù)據(jù)有原始數(shù)據(jù),也包含起始角度和終止角度孩灯,此時數(shù)據(jù)已經(jīng)和最簡demo中的數(shù)據(jù)基本一致了闺金。

進(jìn)行繪制

首先,在svg中生成多個<g>元素峰档,用來容納每一段弧败匹,每一段弧包括路徑<path> 寨昙,文字<text>, 直線<line>三種元素

            //添加路徑
              //添加對應(yīng)的弧組掀亩,即對應(yīng)的弧元素<g>  
              var arcs = svg.selectAll("g")
                            .data(pieData)
                            .enter()
                            .append("g")
                            .attr("transform", function(){
                                return `translate(${ width /2 }, ${ height / 2})`  //es6
                            })
             //添加弧的路徑元素
              arcs.append("path")
                   .attr("fill", function (d, i) { return color(i)})
                   .attr("d", function (d) { return arc(d) })

添加文字

在添加文字之前舔哪,先介紹一下文字的坐標(biāo)是如何計算的。
計算文字坐標(biāo)時槽棍, 會使用到arc.centroil(), 此方法可以計算弧的中心捉蚤,但是弧的中心是相對于圓心來說的,例如如果某段弧的中心是(100,100)炼七,不是值svg的(100缆巧, 100),而是在在相對于圓中心的(100豌拙,100)處. 具體可見圖示陕悬。

弧中心的計算

接下來添加文字

 arcs.append("text")
                   .attr("transform", function(d){ 
                       var x = arc.centroid(d)[0] * 1.5
                       var y = arc.centroid(d)[1] * 1.5
                       return `translate(${x}, ${y})`
                   })
                  .text(function(d){
                        var percent =  Number(d.value) / d3.sum(data, function(d){ return d[1]}) *100
                        return percent.toFixed(2) + "%"
                  })
                  .attr("text-anchor", "middle")
                  .attr("fill", "#fff")
                  .style("font-size", "10px")

效果


預(yù)覽

在外部添加一些指示說明

            //添加弧外文字
             arcs.append("line")
                 .attr("stroke", "#666")
                 .attr("x1",function(d){ return arc.centroid(d)[0] * 2})
                 .attr("y1",function(d){ return arc.centroid(d)[1] * 2})
                 .attr("x2",function(d){ return arc.centroid(d)[0] * 2.4})
                 .attr("y2",function(d){ return arc.centroid(d)[1] * 2.4})

             arcs.append("text")
                  .attr("text-anchor", "middle")
                  .attr("transform", function(d){
                      var x = arc.centroid(d)[0] * 2.6
                      var y = arc.centroid(d)[1] * 2.6
                      return `translate(${x}, ${y})`
                  })
                 .text(function(d){
                     return d.data[0]
                 })
                 .attr("fill", "#666")
                 .style("font-size",' 14px')

效果如下


添加外部文字之后的效果

帶有交互效果的餅狀圖

事實上在,在一些數(shù)據(jù)量比較大或者比較多的場景下按傅,會選擇以其他方式呈現(xiàn)餅圖的數(shù)據(jù)墩莫,例如提示框。接下來逞敷,開始制作帶有提示框的圖表狂秦,以及其配套的一些動畫。

js部分

            const width = 300 
            const height = 300
            const innerRadius = width / 8
            const outerRadius = width / 3

            const innerRadiusFinal = width / 10
            const outerRadiusFinal =  width / 2.8
            // 進(jìn)行數(shù)據(jù)轉(zhuǎn)換
            var pie =d3.pie()
                       .sort(null)
                       .value(function(d){ return d[1] })
                      
            var pieData = pie(data)


            var svg = d3.select("body")
                .append("svg")
                .attr("width", width)
                .attr("height",height)

            //創(chuàng)建一個弧生成器
            var arc = d3.arc()
                            .innerRadius(innerRadius)
                            .outerRadius(outerRadius)
            // for animation
             var arcFinal = d3.arc()
                            .innerRadius(innerRadiusFinal)
                            .outerRadius(outerRadiusFinal);

            var color = d3.scaleOrdinal(d3.schemeCategory20)

            //添加路徑
              //添加對應(yīng)的弧組推捐,即對應(yīng)的弧元素<g>  
              var arcs = svg.selectAll("g")
                            .data(pieData)
                            .enter()
                            .append("g")
                            .attr("transform", function(){
                                return `translate(${ width /2 }, ${ height / 2})`
                            })
             //添加弧的路徑元素
              arcs.append("path")
                   .attr("fill", function (d, i) { return color(i)})
                   .attr("d", function (d) { return arc(d) })
                   .on("click",function(d){
                        console.log(d.data)
                   })
                   .on("mouseover", function(d){
                        tooltip.html(d.data[0] +":"+d.data[1])
                                .style("left", d3.event.pageX + 20+ "px")
                                .style("top", d3.event.pageY + 20 + "px")
                                .style("opacity", 1)
                       d3.select(this).transition()
                                        .duration(150)
                                        .attr("d", arcFinal)                                              
                   })
                   .on("mouseout", function(){
                        d3.select(this).transition()
                                        .duration(150)
                                        .attr("d", arc)
                        tooltip.style("opacity", 0)
                   })
                    
            //添加文字
              arcs.append("text")
                   .attr("transform", function(d){ 
                       var x = arc.centroid(d)[0] 
                       var y = arc.centroid(d)[1] 
                       return `translate(${x}, ${y})`
                   })
                  .text(function(d){
                        var percent =  Number(d.value) / d3.sum(data, function(d){ return d[1]}) *100
                        return percent.toFixed(2) + "%"
                  })
                  .attr("text-anchor", "middle")
                  .attr("fill", "#fff")
                  .style("font-size", "10px")

            //添加提示框
            var tooltip = d3.select("body")
                            .append("div")
                            .attr("class", "tooltip")
                            .style("opacity", 0)

提示框樣式

.tooltip {
            position: absolute;
            width: 100px;
            height: auto;
            font-size: 14px;
            text-align: center;
            border: 1px solid #666;
            border-radius: 5px;
            background:rgba(255, 255, 255, 0.5)
        }

最終效果


最后效果

千里之行裂问,始于足下,希望我的分享能給你一些幫助牛柒,謝謝堪簿。

源碼地址

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市皮壁,隨后出現(xiàn)的幾起案子椭更,更是在濱河造成了極大的恐慌,老刑警劉巖蛾魄,帶你破解...
    沈念sama閱讀 216,744評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件虑瀑,死亡現(xiàn)場離奇詭異,居然都是意外死亡滴须,警方通過查閱死者的電腦和手機舌狗,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,505評論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來扔水,“玉大人痛侍,你說我怎么就攤上這事∧校” “怎么了主届?”我有些...
    開封第一講書人閱讀 163,105評論 0 353
  • 文/不壞的土叔 我叫張陵赵哲,是天一觀的道長。 經(jīng)常有香客問我君丁,道長誓竿,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,242評論 1 292
  • 正文 為了忘掉前任谈截,我火速辦了婚禮,結(jié)果婚禮上涧偷,老公的妹妹穿的比我還像新娘簸喂。我一直安慰自己,他們只是感情好燎潮,可當(dāng)我...
    茶點故事閱讀 67,269評論 6 389
  • 文/花漫 我一把揭開白布喻鳄。 她就那樣靜靜地躺著,像睡著了一般确封。 火紅的嫁衣襯著肌膚如雪除呵。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,215評論 1 299
  • 那天爪喘,我揣著相機與錄音颜曾,去河邊找鬼。 笑死秉剑,一個胖子當(dāng)著我的面吹牛泛豪,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播侦鹏,決...
    沈念sama閱讀 40,096評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼诡曙,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了略水?” 一聲冷哼從身側(cè)響起价卤,我...
    開封第一講書人閱讀 38,939評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎渊涝,沒想到半個月后慎璧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,354評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡跨释,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,573評論 2 333
  • 正文 我和宋清朗相戀三年炸卑,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片煤傍。...
    茶點故事閱讀 39,745評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡盖文,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蚯姆,到底是詐尸還是另有隱情五续,我是刑警寧澤洒敏,帶...
    沈念sama閱讀 35,448評論 5 344
  • 正文 年R本政府宣布,位于F島的核電站疙驾,受9級特大地震影響凶伙,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜它碎,卻給世界環(huán)境...
    茶點故事閱讀 41,048評論 3 327
  • 文/蒙蒙 一函荣、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧扳肛,春花似錦傻挂、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,683評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至套腹,卻和暖如春绪抛,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背电禀。 一陣腳步聲響...
    開封第一講書人閱讀 32,838評論 1 269
  • 我被黑心中介騙來泰國打工幢码, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人尖飞。 一個月前我還...
    沈念sama閱讀 47,776評論 2 369
  • 正文 我出身青樓蛤育,卻偏偏與公主長得像,于是被迫代替她去往敵國和親葫松。 傳聞我的和親對象是個殘疾皇子瓦糕,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,652評論 2 354

推薦閱讀更多精彩內(nèi)容