国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

d3.js——使用svg

hqman / 2856人閱讀

摘要：相比元素，使用可以繪制出更多的圖形，此文嘗試將與結(jié)合由于我也是第一次使用，所以主要根據(jù)此篇的順序來靜態(tài)使用手打元素用于組合對(duì)象的容器，添加到元素上的變換會(huì)應(yīng)用到所有子元素上與就沒啥好講了同時(shí)，在中有一個(gè)容易混淆的點(diǎn)哪些樣式一定要寫在屬性

相比HTML元素，使用SVG可以繪制出更多的圖形，此文嘗試將d3.js與SVG結(jié)合
由于我也是第一次使用SVG，所以主要根據(jù)此篇blog的順序來Let’s Make a Bar Chart, II

靜態(tài)SVG使用

手打SVG



  
    
    4
  
  
    
    8
  
  
    
    15
  
  
    
    16
  
  
    
    23
  
  
    
    42

g元素：用于組合對(duì)象的容器，添加到g元素上的變換會(huì)應(yīng)用到所有子元素上
rect與text就沒啥好講了
同時(shí)，在SVG中有一個(gè)容易混淆的點(diǎn)：哪些樣式一定要寫在屬性之中（比如rect的width），哪些樣式可以通過style表現(xiàn)（如fill，當(dāng)然他們也可以寫在屬性之中，但不知道為什么優(yōu)先級(jí)低于class給予的樣式）。一個(gè)比較好記的方法就是：形狀幾何（如rect的width）要寫在屬性之中，修飾類的（如fill）可通過style表現(xiàn)

d3生成SVG

先貼代碼，CSS不變

    let data = [4, 8, 15, 16, 23, 42];
    let width = 420,
        barHeight = 20;
    let x = d3.scaleLinear()
        .domain([0, d3.max(data)])
        .range([0, width]);
    let chart = d3.select(".chart")
        .attr("width", width)
        .attr("height", barHeight * data.length);
    let bar = chart.selectAll("g")  //數(shù)據(jù)綁定在g上
        .data(data)
        .enter().append("g")
        .attr("transform", (d, i) => { return "translate(0," + i * barHeight + ")"});
    bar.append("rect")
        .attr("width", d => x(d))
        .attr("height", barHeight - 1);
    bar.append("text")
        .attr("x", d => x(d) - 3) //字符x軸位置
        .attr("y", barHeight/2) //字符y軸位置
        .attr("dy", ".35em") //字符相對(duì)位置
        .text(d => d);

其實(shí)差別不是特別多，只不過是用了SVG，并且把數(shù)據(jù)綁在g上，不用做另外的數(shù)據(jù)綁定

加載數(shù)據(jù)

d3.tsv()可以用于加載解析TSV格式的數(shù)據(jù)

總結(jié)

本文主要是講述了對(duì)svg的使用，但核心思想還是不變的

參考資料

Let’s Make a Bar Chart, II
SVG 文本

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/102892.html

相關(guān)文章

  • 使用JavaScript和D3.js實(shí)現(xiàn)數(shù)據(jù)可視化

    摘要：它的全稱是數(shù)據(jù)驅(qū)動(dòng)文檔，并且它被稱為一個(gè)互動(dòng)和動(dòng)態(tài)的數(shù)據(jù)可視化庫網(wǎng)絡(luò)。我們將使用文本編輯器和瀏覽器。出于測試目的，建議使用工具來檢查和調(diào)試和，例如或。使矩形反映數(shù)據(jù)目前，我們陣列中的所有矩形沿軸具有相同的位置，并且不代表高度方面的數(shù)據(jù)。 歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~ 本文由獨(dú)木橋先生 發(fā)表于云+社區(qū)專欄 介紹 D3.js是一個(gè)JavaScript庫。它的...

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

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

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

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

  • D3.js可視化前端框架的使用要點(diǎn)

    摘要：該事件不會(huì)區(qū)分字母的大小寫，例如和被視為一致。這些布局的作用都是將某種數(shù)據(jù)轉(zhuǎn)換成另一種數(shù)據(jù)，而轉(zhuǎn)換后的數(shù)據(jù)是利于可視化的。而有元素與數(shù)據(jù)對(duì)應(yīng)的部分稱為。 1.安裝

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

  • 注釋！注釋！(1) - Area Chart

    摘要：我的目標(biāo)是，注釋個(gè)的例子。這兩句都是和相關(guān)的，所以放在一起講。區(qū)域的意思是，對(duì)于一個(gè)，和之間的部分表示此覆蓋的區(qū)域。是一個(gè)數(shù)組的輔助函數(shù)，可以返回其最小值和最大值。的映射是，，最大值，也就是的最低和最高。 我的目標(biāo)是，注釋100個(gè)d3.js的例子。 可能是史上最詳細(xì)的 。 Area Chart是Basic Charts里的第一個(gè)例子。 解析 1 var margin = {top...

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

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

0條評(píng)論

hqman

男|高級(jí)講師

TA的文章

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