成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

D3.js入門

shixinzhang / 2723人閱讀

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

D3.js入門

1.什么是D3.js?

Data-Driver-Document(數(shù)據(jù)驅(qū)動文檔):是一個用來使用Web標準做數(shù)據(jù)可視化的js庫;

數(shù)據(jù)可視化:用交互的/可視化的方式對抽象數(shù)據(jù)進行展示,已達到數(shù)據(jù)認知的目的,數(shù)據(jù)是純粹的的事實,純粹意味著這種事實沒有經(jīng)過任何處理,而信息是數(shù)據(jù)處理后的結果,他揭示了數(shù)據(jù)的意義;

優(yōu)勢:比Processing這樣的底層繪圖簡單,比Echarts這樣的高度封裝的圖表更自由,也就是說d3.js為我們提供了一個不是特別底層,也不是高度封裝的庫,能夠給使用者很好地發(fā)揮空間,同時學習成本也沒有那么大。

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

理解enter-updte-exit(進入-更新-退出)模式

enter(進入)

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

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

update(更新)

如上圖所示,陰影區(qū)域表示圖像和數(shù)據(jù)集合的交集,也就是當前數(shù)據(jù)所對應的圖形,通過data函數(shù),可以選擇出交集集合,然后對選擇出的集合進行操作,對元素進行更新;

exit(退出)

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

3.實例

柱狀圖

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

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

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

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

  render(data);

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

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

轉載請注明本文地址:http://systransis.cn/yun/82849.html

相關文章

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

    摘要:入門,根據(jù)官網(wǎng)部分教程學習,發(fā)現(xiàn)因為版本更新,有些和概念可能不適用,但總體思想未變。 入門d3.js,根據(jù)官網(wǎng)部分教程學習,發(fā)現(xiàn)因為版本更新,有些api和概念可能不適用,但總體思想未變。本文思路跟隨此篇blogLet’s Make a Bar Chart學習,加上自己的理解,并且查閱了部分更新資料 元素選擇 d3通過d3.select()或者d3.selectAll()獲取元素,這兩個...

    yanbingyun1990 評論0 收藏0
  • d3入門篇(一):基礎知識

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

    xuweijian 評論0 收藏0
  • 前端綜合性文檔和教程總結(持續(xù)更新)

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

    piglei 評論0 收藏0
  • d3.js 使用坐標軸

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

    Karuru 評論0 收藏0
  • d3.js 動態(tài)圖表

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

    Cc_2011 評論0 收藏0

發(fā)表評論

0條評論

shixinzhang

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<