d3.js——使用svg

hqman 發(fā)布于2019-08-23 16:19 / 2848人閱讀

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

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

靜態(tài)SVG使用

手打SVG

g元素：用于組合對象的容器，添加到g元素上的變換會應用到所有子元素上
rect與text就沒啥好講了
同時，在SVG中有一個容易混淆的點：哪些樣式一定要寫在屬性之中（比如rect的width），哪些樣式可以通過style表現(xiàn)（如fill，當然他們也可以寫在屬性之中，但不知道為什么優(yōu)先級低于class給予的樣式）。一個比較好記的方法就是：形狀幾何（如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") //字符相對位置
        .text(d => d);

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

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

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

總結

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

參考資料

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

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102892.html

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

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

mingde 2019-08-23 10:56 評論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 2019-08-23 16:43 評論0 收藏0
D3.js可視化前端框架的使用要點

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

MASAILA 2019-08-22 14:57 評論0 收藏0
注釋！注釋！(1) - Area Chart

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

Java3y 2019-08-19 17:57 評論0 收藏0