<menu id="ycqsw"></menu><nav id="ycqsw"><code id="ycqsw"></code></nav>
<dd id="ycqsw"><menu id="ycqsw"></menu></dd>
  • <nav id="ycqsw"></nav>
    <menu id="ycqsw"><strong id="ycqsw"></strong></menu>
    <xmp id="ycqsw"><nav id="ycqsw"></nav>
  • js設置字體顏色代碼(文字顏色和內容的方法)


    WHAT

    D3.js是一個JavaScript庫操縱文檔基于數據。D3幫助你把數據使用HTML、SVG和CSS。D3強調web標準給你完整的現代瀏覽器的功能沒有把自己專有的框架,結合強大的可視化組件和數據驅動的DOM操作方法。

    D3是一個專門處理2d場景的數據可視化的庫

    WHY

    社區已經存在大量處理數據可視化的js庫,為何還要學習D3呢?

    類似echarts,highcharts這些高度封裝好的庫,已經可以很好的在PC和移動設備上運行,兼容當前絕大部分瀏覽器,將常見的一些柱狀圖,餅圖,折線圖等已經很好的封裝,開發者不需要做太多事情即可直接拿來使用

    當開發過程中遇到一些需要個性化展示的可視化需求時,類似echarts,highcharts這類庫并不能很好支持,此時便需要更加靈活的D3,D3就像是一只畫筆,可以讓你自由的在瀏覽器上發揮你的智慧才能,讓你更好的自由發揮

    D3可以提供很好的自由度,也意味著其上手難度和學習成本等是高于echarts這類配置化的可視化庫,至于在項目中選擇哪個庫,需要結合項目需求組員能力等情況

    幾個常見可視化庫npm對比

    D3.js入門教程

    HOW

    如何學習D3呢?

    其實無論從零學習何種技術,作為普通基層碼農無非就看視頻、官方文檔和相關的文檔這幾個主要渠道,若是身邊有相關的大神便能事半功倍了

    接下來就是從萬能的hello word開始吧

    hello word

    在頁面中創建一個空的h1標簽,然后通過D3將h1的內容修改為hello word

    <h1></h1>
    
    <script type="text/javascript">
      window.onload = function () {
        // 獲取h1的dom, 將其內容替換為 hello word
        const h = d3.select('h1').text('hello word')
    
        // 將h1標簽的字體顏色和大小修改
        h
          .style('color', 'blue')
          .style('font-size', '40px')
      };
    </script>

    使用D3編寫一個hello word就是這么簡單.整體的使用感覺是不是很類似古老的jq

    常見API

    選擇元素

    • d3.select()
      • 選擇所有指定元素的第一個
    • d3.selectAll()
      • 選擇指定元素的全部

    綁定數據

    綁定數據是D3中一個比較獨特的功能,能將數據綁定到DOM上

    主要通過兩個函數來綁定數據

    1. datum(): 綁定到一個數據到選擇元素上
    2. data(): 綁定一個數組到選擇元素上,數組的各項值分別與選擇元素的各元素綁定,相對于datum比較常用
    • 使用datum 綁定數據
    <h1></h1>
    <h1></h1>
    <h1></h1>
    
    <script type="text/javascript">
      window.onload = function () {
        // 獲取h1的dom選擇集
        d3.selectAll("h1")
          .datum("datum bind data")
          .text((data, index) => {
            // data 是 datum 綁定的數據, index 是選擇元素對應的索引
            // return 的數據 才是頁面上選擇元素內展示的內容
            return `${data} ${index}`
          });
      };
    </script>

    頁面上三個h1標簽分別顯示為

    datum bind data 0
    datum bind data 1
    datum bind data 2
    • 使用data 綁定數據
    <h1></h1>
    <h1></h1>
    <h1></h1>
    
    <script type="text/javascript">
      window.onload = function () {
        // 定義一個data綁定數據的數組
        const arr = ['蘋果', '香蕉', '西瓜']
    
        // 獲取h1的dom選擇集
        d3.selectAll("h1")
          .data(arr) // 將arr中的數據 分別綁定到h1選擇集中對應的數據
          .text((data, index) => {
            // data 是 datum 綁定的數據, index 是選擇元素對應的索引
            // return 的數據 才是頁面上選擇元素內展示的內容
            return data
          });
      };
    </script>

    頁面上三個h1標簽分別顯示為

    蘋果
    香蕉
    西瓜

    需要注意的是: 若是arr的數量小于h1的數據集數量,此時超過arr長度的元素中則顯示其標簽內原有的數據

    選擇、插入、刪除元素

    已經講解了 select 和 selectAll,以及選擇集的概念。本節具體講解這兩個函數的用法。

    假設在 body 中有三個段落元素:

    <p>Apple</p>
    <p>Pear</p>
    <p>Banana</p>

    現在,要分別完成以下四種選擇元素的任務。

    選擇第一個 p 元素

    t("p");
    p1.style("color","red");

    選擇三個 p 元素

    var p = body.selectAll("p");
    p.style("color","red");

    選擇第二個 p 元素

    有不少方法,一種比較簡單的是給第二個元素添加一個 id 號。

    Pear

    然后,使用 select 選擇元素,注意參數中 id 名稱前要加 # 號。

    var p2 = body.select("#myid");
    p2.style("color","red");

    選擇后兩個 p 元素

    給后兩個元素添加 class,

    <p class="myclass">Pear</p>
    <p class="myclass">Banana</p>

    由于需要選擇多個元素,要用 selectAll。注意參數,class 名稱前要加一個點。

    var p = body.selectAll(".myclass");
    p.style("color","red");

    插入元素

    插入元素涉及的函數有兩個:

    • append():在選擇集末尾插入元素
    • insert():在選擇集前面插入元素

    假設有三個段落元素,與上文相同。

    append()

    body.append("p")
        .text("append p element");

    在 body 的末尾添加一個 p 元素,結果為:

    Apple
    Pear
    Banana
    append p element

    insert()

    在 body 中 id 為 myid 的元素前添加一個段落元素。

    body.insert("p","#myid")
      .text("insert p element");

    已經指定了 Pear 段落的 id 為 myid,因此結果如下。

    Apple
    insert p element
    Pear
    Banana

    刪除元素

    刪除一個元素時,對于選擇的元素,使用 remove 即可,例如:

    var p = body.select("#myid");
    p.remove();

    版權聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至 舉報,一經查實,本站將立刻刪除。

    發表評論

    登錄后才能評論
    国产精品区一区二区免费