99999久久久久久亚洲,欧美人与禽猛交狂配,高清日韩av在线影院,一个人在线高清免费观看,啦啦啦在线视频免费观看www

熱線電話：13121318867

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

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

一、D3概念

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

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

二、D3優(yōu)點

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

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

3.D3基于現(xiàn)有的Web標(biāo)準(zhǔn)的HTML和SVG就能有強(qiáng)大的數(shù)據(jù)可視化功能，根本不需要依賴任何第三方插件或?qū)倏蚣堋?

4.D3與數(shù)據(jù)相結(jié)合，能夠提供一種可以直接操作Web的內(nèi)置場景結(jié)構(gòu)，也就是文檔對象模型的方式。

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

三、D3繪制餅狀圖

下面來舉一個D3繪制餅狀圖的例子，給大家展示D3強(qiáng)大的數(shù)據(jù)可視化功能。

1.data.csv文件，使用鍵值對的形式進(jìn)行書寫 


education,population
大專及以上,11964
高中和中專,18799
初中,51966
小學(xué),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代碼實現(xiàn)餅狀圖 


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)//設(shè)置內(nèi)半徑
    .outerRadius(200)//設(shè)置外半徑
    
    
    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)})//給不同的扇形區(qū)填充不同的顏色
    
    g.selectAll("text")//給每個扇形去添加對應(yīng)文字
    .data(angle_data(data))
    .enter()
    .append("text")
    .text(function(d){return d.data.education})
    .attr("transform",function(d){return "translate("+arc_generator.centroid(d)+")"})//調(diào)成每個文字的對應(yīng)位置
    .attr("text-anchor","middle")//是文字居中
});

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


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

1.HTML，也就是超文本標(biāo)記語言，通常被用來設(shè)定網(wǎng)頁的內(nèi)容

2.CSS，即層疊樣式表，通常被用來設(shè)定網(wǎng)頁的樣式

JavaScript，一種直譯式腳本語言，我們通過它來設(shè)定網(wǎng)頁的行為

DOM，所謂的文檔對象模型，使用它對文檔的內(nèi)容和結(jié)構(gòu)進(jìn)行修改

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

數(shù)據(jù)分析咨詢請掃描二維碼

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

數(shù)據(jù)分析師資訊
更多

OK
客服在線
立即咨詢
客服在線
立即咨詢
') } function initGt() { var handler = function (captchaObj) { captchaObj.appendTo('#captcha'); captchaObj.onReady(function () { $("#wait").hide(); }).onSuccess(function(){ $('.getcheckcode').removeClass('dis'); $('.getcheckcode').trigger('click'); }); window.captchaObj = captchaObj; }; $('#captcha').show(); $.ajax({ url: "/login/gtstart?t=" + (new Date()).getTime(), // 加隨機(jī)數(shù)防止緩存 type: "get", dataType: "json", success: function (data) { $('#text').hide(); $('#wait').show(); // 調(diào)用 initGeetest 進(jìn)行初始化 // 參數(shù)1：配置參數(shù) // 參數(shù)2：回調(diào)，回調(diào)的第一個參數(shù)驗證碼對象，之后可以使用它調(diào)用相應(yīng)的接口 initGeetest({ // 以下 4 個配置參數(shù)為必須，不能缺少 gt: data.gt, challenge: data.challenge, offline: !data.success, // 表示用戶后臺檢測極驗服務(wù)器是否宕機(jī) new_captcha: data.new_captcha, // 用于宕機(jī)時表示是新驗證碼的宕機(jī) product: "float", // 產(chǎn)品形式，包括：float，popup width: "280px", https: true // 更多配置參數(shù)說明請參見：http://docs.geetest.com/install/client/web-front/ }, handler); } }); } function codeCutdown() { if(_wait == 0){ //倒計時完成 $(".getcheckcode").removeClass('dis').html("重新獲取"); }else{ $(".getcheckcode").addClass('dis').html("重新獲取("+_wait+"s)"); _wait--; setTimeout(function () { codeCutdown(); },1000); } } function inputValidate(ele,telInput) { var oInput = ele; var inputVal = oInput.val(); var oType = ele.attr('data-type'); var oEtag = $('#etag').val(); var oErr = oInput.closest('.form_box').next('.err_txt'); var empTxt = '請輸入'+oInput.attr('placeholder')+'！'; var errTxt = '請輸入正確的'+oInput.attr('placeholder')+'！'; var pattern; if(inputVal==""){ if(!telInput){ errFun(oErr,empTxt); } return false; }else { switch (oType){ case 'login_mobile': pattern = /^1[3456789]\d{9}$/; if(inputVal.length==11) { $.ajax({ url: '/login/checkmobile', type: "post", dataType: "json", data: { mobile: inputVal, etag: oEtag, page_ur: window.location.href, page_referer: document.referrer }, success: function (data) { } }); } break; case 'login_yzm': pattern = /^\d{6}$/; break; } if(oType=='login_mobile'){ } if(!!validateFun(pattern,inputVal)){ errFun(oErr,'') if(telInput){ $('.getcheckcode').removeClass('dis'); } }else { if(!telInput) { errFun(oErr, errTxt); }else { $('.getcheckcode').addClass('dis'); } return false; } } return true; } function errFun(obj,msg) { obj.html(msg); if(msg==''){ $('.login_submit').removeClass('dis'); }else { $('.login_submit').addClass('dis'); } } function validateFun(pat,val) { return pat.test(val); }