熱線電話：13121318867

登錄
首頁大數據時代一篇文章帶你了解D3的基本概念及使用方法
一篇文章帶你了解D3的基本概念及使用方法
2020-07-29
收藏

經常聽到大家在討論D3怎么怎么樣，小編還很好奇D3是什么，今天終于了解到了。下面小編就帶大家一起來看，到底什么是D3.用它能做什么吧。

一、D3概念

D3 的全稱為：Data-Driven Documents，實質上就是一個被數據驅動的文檔。通俗來理解，其實就是一個開源的JavaScript 的函數庫，我們通常用它來做數據可視化的。D3 可以讓設計師通過SVG這種常見的圖形格式進行創作，因此對于設計師來說，D3 很是方便快捷。而且對于程序員來說，D3 也很合適，因為它是兼容Web標準的。

具體的官方介紹大家可以查看D3官網：https://d3js.org

二、D3優點

1.D3是完全開放的，我們可以免費使用D3制作一些娛樂或者賺錢的東西，甚至不用提到D3的名字;

2.Google Chrome、Mozilla Firefox、Opera、Safari和Internet Explorer 9及其以上版本的瀏覽器都兼容D3.

3.D3基于現有的Web標準的HTML和SVG就能有強大的數據可視化功能，根本不需要依賴任何第三方插件或專屬框架。

4.D3與數據相結合，能夠提供一種可以直接操作Web的內置場景結構，也就是文檔對象模型的方式。

5.D3能夠直接在SVG這種Web文檔格式的圖形元素上根據數據值來設置屬性。

三、D3繪制餅狀圖

下面來舉一個D3繪制餅狀圖的例子，給大家展示D3強大的數據可視化功能。

1.data.csv文件，使用鍵值對的形式進行書寫 


education,population
大專及以上,11964
高中和中專,18799
初中,51966
小學,35876
文盲人口,5466


2.html代碼 


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="container"></div>
    </body>
    <script type="text/javascript" src="js/d3.js" ></script>
    <script type="text/javascript" src="js/pinzhuangtu.js" ></script>
</html>


3.js代碼實現餅狀圖 


d3.csv("data.csv",type,function(data){

    width = 400,
    height = 400;

    var svg = d3.select("#container")
    .append("svg")
    .attr({
        "width":width,
        "height":height
    })
    
    var g = svg.append("g")
    .attr("transform","translate(200, 200)")
    
    var arc_generator = d3.svg.arc()
    .innerRadius(100)//設置內半徑
    .outerRadius(200)//設置外半徑
    
    
    var angle_data = d3.layout.pie()
    .value(function(d){return d.population;})
    
    console.log(angle_data(data));
    
    var color = d3.scale.category10();
    
    g.selectAll("path")
    .data(angle_data(data))
    .enter()
    .append("path")
    .attr("d", arc_generator)
    .style("fill",function(d,i){return color(i)})//給不同的扇形區填充不同的顏色
    
    g.selectAll("text")//給每個扇形去添加對應文字
    .data(angle_data(data))
    .enter()
    .append("text")
    .text(function(d){return d.data.education})
    .attr("transform",function(d){return "translate("+arc_generator.centroid(d)+")"})//調成每個文字的對應位置
    .attr("text-anchor","middle")//是文字居中
});

function type(d) {
    d.population =+ d.population;
    return d;
}


看到這里，大家是不是對D3的可視化功能給驚艷到了呢!肯定有很多小伙伴都想要學習使用D3了吧，但是學習和使用D3還是有一定難度的，尤其是對于像小編一樣的編程小白來說。因此在學習D3之前我們還必須要掌握一些編程方面的具體知識，主要涉及到以下幾個方面：

1.HTML，也就是超文本標記語言，通常被用來設定網頁的內容

2.CSS，即層疊樣式表，通常被用來設定網頁的樣式

JavaScript，一種直譯式腳本語言，我們通過它來設定網頁的行為

DOM，所謂的文檔對象模型，使用它對文檔的內容和結構進行修改

SVG，就是可縮放矢量圖形，往往被用于繪制可視化的圖形


CDA數據分析師考試相關入口一覽（建議收藏）：

? 想報名CDA認證考試，點擊>>>   “CDA報名” 了解CDA考試詳情；

? 想學習CDA考試教材，點擊>>> “CDA教材” 了解CDA考試詳情；

? 想加入CDA考試題庫，點擊>>> “CDA題庫” 了解CDA考試詳情；

? 想了解CDA考試含金量，點擊>>> “CDA含金量” 了解CDA考試詳情；

D3 餅狀圖 數據可視化

數據分析咨詢請掃描二維碼

若不方便掃碼，搜微信號：CDAshujufenxi

上一篇這幾種常見的假設檢驗方法，你了解嗎？
下一篇mysql到底是什么？與SQL有啥關系？如何安裝？
數據分析師考試動態
CDA報考指南
數據分析學習
數據分析師資訊
更多

CDA教育閉環

常見問題

關于我們

CDA數據分析師公眾號

  • CDA數據分析師公眾號

CDA考試中心小程序

  • CDA考試中心服務號

CDA數據分析師App下載

  • CDA數據分析師App下載
Copyright © 2015-2021, www.ruiqisteel.com All Rights Reserved. CDA數據分析師(北京國富如荷網絡科技有限公司) 版權所有 京ICP備11001960號-9 京公網安備 11010802034615號 經營許可證編號：京B2-20210330
聯系電話：13321103290 (微信同號)

OK
客服在線
立即咨詢
日韩人妻系列无码专区视频,先锋高清无码,无码免费视欧非,国精产品一区一区三区无码
客服在線
立即咨詢