亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

D3.js入門(mén)

shixinzhang / 2776人閱讀

摘要：通過(guò)函數(shù)可以選擇出沒(méi)有關(guān)聯(lián)任何數(shù)據(jù)的圖形，可以調(diào)用相關(guān)函數(shù)更新或是刪除。

D3.js入門(mén) 
1.什么是D3.js？

Data-Driver-Document（數(shù)據(jù)驅(qū)動(dòng)文檔）：是一個(gè)用來(lái)使用Web標(biāo)準(zhǔn)做數(shù)據(jù)可視化的js庫(kù)；

數(shù)據(jù)可視化：用交互的/可視化的方式對(duì)抽象數(shù)據(jù)進(jìn)行展示，已達(dá)到數(shù)據(jù)認(rèn)知的目的，數(shù)據(jù)是純粹的的事實(shí)，純粹意味著這種事實(shí)沒(méi)有經(jīng)過(guò)任何處理，而信息是數(shù)據(jù)處理后的結(jié)果，他揭示了數(shù)據(jù)的意義；

優(yōu)勢(shì)：比Processing這樣的底層繪圖簡(jiǎn)單，比Echarts這樣的高度封裝的圖表更自由，也就是說(shuō)d3.js為我們提供了一個(gè)不是特別底層，也不是高度封裝的庫(kù)，能夠給使用者很好地發(fā)揮空間，同時(shí)學(xué)習(xí)成本也沒(méi)有那么大。

2.D3的數(shù)據(jù)與圖形

理解enter-updte-exit（進(jìn)入-更新-退出）模式

enter(進(jìn)入) 

A:代表數(shù)據(jù)集合，就是需要可視化的數(shù)據(jù)；
B:代表圖形元素的集合，就是展示出的圖形；

如上圖所示，集合A中的陰影區(qū)部分表示了未被可視化的數(shù)據(jù)，enter操作的意義在于通過(guò)enter()函數(shù)返回一個(gè)集合，
這個(gè)集合里面包含的就是沒(méi)有被可是可視化的數(shù)據(jù)；這也就是我們數(shù)據(jù)化的第一部分
操作，找到那些沒(méi)有被可視化的數(shù)據(jù)；

update（更新）

如上圖所示，陰影區(qū)域表示圖像和數(shù)據(jù)集合的交集，也就是當(dāng)前數(shù)據(jù)所對(duì)應(yīng)的圖形，通過(guò)data函數(shù)，可以選擇出交集集合，然后對(duì)選擇出的集合進(jìn)行操作，對(duì)元素進(jìn)行更新；

exit(退出)

圖中的陰影表示沒(méi)有關(guān)聯(lián)任何數(shù)據(jù)的圖形，為什么會(huì)有沒(méi)有數(shù)據(jù)的圖形，一般而言是從
數(shù)據(jù)中刪除了數(shù)據(jù)產(chǎn)生的。通過(guò)exit函數(shù)可以選擇出沒(méi)有關(guān)聯(lián)任何數(shù)據(jù)的圖形，可以調(diào)
用相關(guān)函數(shù)更新或是刪除。

3.實(shí)例

柱狀圖

var data = [10, 15, 30, 50, 80, 65, 55, 30, 20, 10, 8]; 
    //定義數(shù)據(jù)，定義集合A

  function render(data) { //render函數(shù)來(lái)更新圖表
      // Enter
      d3.select("body").selectAll("div.h-bar") 
           //選中body,選中類名為h-bar的div，其實(shí)此時(shí)頁(yè)面上沒(méi)有這些元素，選擇出圖形元素的集合
          .data(data) // data函數(shù)將數(shù)組綁定到將要?jiǎng)?chuàng)建的圖形元素上
          .enter() // enter函數(shù)選擇沒(méi)有被可視化的數(shù)據(jù)元素，render第一次調(diào)用的時(shí)候，沒(méi)有數(shù)據(jù)被可視化，所以選中的是所有的數(shù)據(jù)
              .append("div") // 為每一個(gè)數(shù)據(jù)創(chuàng)建一個(gè)div，這里d3為響應(yīng)的div添加了__data__屬性，這個(gè)屬性的值為綁定的數(shù)據(jù)值；
                  .attr("class", "h-bar")//類名設(shè)置為h-bar
              .append("span"); //每個(gè)div中添加一個(gè)span

      // Update
      d3.select("body").selectAll("div.h-bar")
          .data(data)  //定義圖形集合和數(shù)據(jù)集合,更新模式下，data()函數(shù)返回?cái)?shù)據(jù)集合和圖形集合的交集
              .style("width", function (d) { // 在和數(shù)據(jù)關(guān)聯(lián)的圖形更改屬性，所有的d3修飾函數(shù)都可以使用這樣的函數(shù)來(lái)修改圖形元素的屬性，這個(gè)函數(shù)有一個(gè)形參，d代表與對(duì)應(yīng)圖形元素關(guān)聯(lián)的數(shù)據(jù)值
                  return (d * 3) + "px";
              })
              .select("span") // 子元素能拿到父級(jí)元素的值
                  .text(function (d) {
                      return d;
                  });
              
      // Exit
      d3.select("body").selectAll("div.h-bar")
          .data(data)
          .exit() //得到?jīng)]有任何數(shù)據(jù)關(guān)聯(lián)的圖形元素
              .remove();//移除這些元素        
  }

  setInterval(function () { 
      data.shift();
      data.push(Math.round(Math.random() * 100));
      render(data);
  }, 1500);

  render(data);

參考文獻(xiàn)：《D3.js數(shù)據(jù)可視化實(shí)戰(zhàn)手冊(cè)》

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/82849.html

相關(guān)文章

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

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

    yanbingyun1990 評(píng)論0 收藏0

  • d3入門(mén)篇（一）：基礎(chǔ)知識(shí)

    摘要：安裝就是一個(gè)的庫(kù)，不需要安裝，可下載文件或直接引用網(wǎng)絡(luò)鏈接。示例選擇集，與原生中的用法類似，返回匹配的第一項(xiàng)，返回匹配的所有項(xiàng)。 安裝 d3.js就是一個(gè)js的庫(kù)，不需要安裝，可下載文件或直接引用網(wǎng)絡(luò)鏈接。 示例 first psecond pthird p 選擇集 select()，selectAll() 與原生js中的querySelector querySelectorAll...

    xuweijian 評(píng)論0 收藏0

  • 前端綜合性文檔和教程總結(jié)（持續(xù)更新）

    摘要：小弟在前端摸爬滾打一段時(shí)間，發(fā)現(xiàn)前端的比較好的文檔比較分散，特別是中文的，我平時(shí)都是收藏在瀏覽器里，以后有好的教程和綜合性的文檔我會(huì)更新到這里。小組中文文檔，很全。 小弟在前端摸爬滾打一段時(shí)間，發(fā)現(xiàn)前端的比較好的文檔比較分散，特別是中文的，我平時(shí)都是ctrl+D收藏在瀏覽器里，以后有好的教程和綜合性的文檔我會(huì)更新到這里。一則可以做個(gè)記錄，防止丟失。二則有需要的朋友可以來(lái)我這里找一找。 ...

    piglei 評(píng)論0 收藏0

  • d3.js 使用坐標(biāo)軸

    摘要：本片記錄坐標(biāo)軸入門(mén)，使用版本如何實(shí)現(xiàn)坐標(biāo)軸生成的坐標(biāo)圖是通過(guò)的路徑元素元素組成的，如下圖表示的是底部坐標(biāo)軸不包括內(nèi)部刻度，如下這部分通過(guò)描繪，在中稱為容器則包括了和作為即線，即文字實(shí)現(xiàn)坐標(biāo)軸主要步驟步驟主要如下創(chuàng)建比例尺創(chuàng)建坐標(biāo)軸，是個(gè)函數(shù) 本片blog記錄d3坐標(biāo)軸入門(mén)，使用版本v5.9.2 SVG如何實(shí)現(xiàn)坐標(biāo)軸 d3生成的坐標(biāo)圖是通過(guò)svg的path(路徑)元素 + g + lin...

    Karuru 評(píng)論0 收藏0

  • d3.js 動(dòng)態(tài)圖表

    摘要：使用創(chuàng)建動(dòng)態(tài)圖表主要使用到了部分的，通過(guò)他們可以完成動(dòng)畫(huà)我的學(xué)習(xí)記錄是通過(guò)一個(gè)例子了解這些會(huì)動(dòng)的柱狀圖還是拿之前的例子，代碼在此完整的柱圖修改的代碼部分在于創(chuàng)建處原來(lái)的代碼加上動(dòng)畫(huà)效果后代碼如下動(dòng)畫(huà)開(kāi)始前狀態(tài)返回持續(xù)時(shí)間，是的動(dòng)畫(huà)函數(shù)， d3js v5.9.2 使用d3創(chuàng)建動(dòng)態(tài)圖表主要使用到了d3.trasition部分的API，通過(guò)他們可以完成動(dòng)畫(huà) 我的學(xué)習(xí)記錄是通過(guò)一個(gè)例子了解...

    Cc_2011 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<