D3.js 入門系列3

時間 2019-11-25

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="svg"></div>

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
    const dataset=[50,43,120,87,99,167,142];
    const height=400;
    const width=400;
    const svg=d3.select("#svg").append("svg")
        .attr("height",height)
        .attr("width",width)
    const padding={top:20,left:20,right:20,bottom:20};
    const rectStep=35;
    const rectWith=30;
    svg.selectAll("rect").data(dataset).enter().append("rect").attr("fill","red")
        .attr("x",function(d,i){return padding.left+i*rectStep})
        .attr("y",function (d,i) {return height-padding.bottom-d})
        .attr("width",rectWith).attr("height",function (d,i) {return d});
    const text=svg.selectAll("text").data(dataset).enter().append("text").attr("fill","#fff")
        .attr("font-size","14px").attr("text-anchor","middle")
        .attr("x",function(d,i){return padding.left+i*rectStep})
        .attr("y",function (d,i) {return height-padding.bottom-d})
        .text(function (d,i) {
            return d
        })
        .attr("dx",rectWith/2)
        .attr("dy","1em");
</script>
</body>
</html>

View Code

第五章作一個簡單的圖表

柱形圖是一種最簡單的可視化圖標，主要有矩形、文字標籤、座標軸組成。本文爲簡單起見，只繪製矩形的部分，用以講解如何使用 D3 在 SVG 畫布中繪圖。html

畫布是什麼

前幾章的處理對象都是 HTML 的文字，沒有涉及圖形的製做。數組

要繪圖，首要須要的是一塊繪圖的「畫布」。瀏覽器

HTML 5 提供兩種強有力的「畫布」：SVG 和 Canvas。app

SVG 是什麼

SVG，指可縮放矢量圖形（Scalable Vector Graphics），是用於描述二維矢量圖形的一種圖形格式，是由萬維網聯盟制定的開放標準。 SVG 使用 XML 格式來定義圖形，除了 IE8 以前的版本外，絕大部分瀏覽器都支持 SVG，可將 SVG 文本直接嵌入 HTML 中顯示。ide

SVG 有以下特色：svg

SVG 繪製的是矢量圖，所以對圖像進行放大不會失真。
基於 XML，能夠爲每一個元素添加 JavaScript 事件處理器。
每一個圖形均視爲對象，更改對象的屬性，圖形也會改變。
不適合遊戲應用。

Canvas 是什麼

Canvas 是經過 JavaScript 來繪製 2D 圖形，是 HTML 5 中新增的元素。spa

Canvas 有以下特色：code

繪製的是位圖，圖像放大後會失真。
不支持事件處理器。
可以以 .png 或 .jpg 格式保存圖像
適合遊戲應用

添加畫布

D3 雖然沒有明文規定必定要在 SVG 中繪圖，可是 D3 提供了衆多的 SVG 圖形的生成器，它們都是隻支持 SVG 的。所以，建議使用 SVG 畫布。htm

使用 D3 在 body 元素中添加 svg 的代碼以下。對象

var width = 300;  //畫布的寬度
var height = 300;   //畫布的高度

var svg = d3.select("body")     //選擇文檔中的body元素
    .append("svg")          //添加一個svg元素
    .attr("width", width)       //設定寬度
    .attr("height", height);    //設定高度

有了畫布，接下來就能夠在畫布上做圖了。

繪製矩形

本文繪製一個橫向的柱形圖。只繪製矩形，不繪製文字和座標軸。

在 SVG 中，矩形的元素標籤是 rect。例如：

<svg>
<rect></rect>
<rect></rect>
</svg>

上面的 rect 裏沒有矩形的屬性。矩形的屬性，經常使用的有四個：

x：矩形左上角的 x 座標
y：矩形左上角的 y 座標
width：矩形的寬度
height：矩形的高度

要注意，在 SVG 中，x 軸的正方向是水平向右，y 軸的正方向是垂直向下的。

如今給出一組數據，要對此進行可視化。數據以下：

var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //數據（表示矩形的寬度）

　　爲簡單起見，咱們直接用數值的大小來表示矩形的像素寬度（後面會說到這不是一種好方法）。而後，添加如下代碼。

var rectHeight = 25;   //每一個矩形所佔的像素高度(包括空白)

svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x",20)
    .attr("y",function(d,i){
         return i * rectHeight;
    })
    .attr("width",function(d){
         return d;
    })
    .attr("height",rectHeight-2)
    .attr("fill","steelblue");

　　這段代碼添加了與 dataset 數組的長度相同數量的矩形，所使用的語句是：

svg.selectAll("rect")   //選擇svg內全部的矩形
    .data(dataset)  //綁定數組
    .enter()        //指定選擇集的enter部分
    .append("rect") //添加足夠數量的矩形元素

這段代碼之後會經常出如今 D3 的代碼中，請務必牢記。目前不深刻討論它的做用機制是怎樣的，只須要讀者牢記，當：

有數據，而沒有足夠圖形元素的時候，使用此方法能夠添加足夠的元素。

添加了元素以後，就須要分別給各元素的屬性賦值。在這裏用到了 function(d, i)，前面已經講過，d 表明與當前元素綁定的數據，i 表明索引號。給屬性賦值的時候，是須要用到被綁定的數據，以及索引號的。

最後一行的：

.attr("fill","steelblue");

是給矩形元素設置顏色。通常來講，最好寫成外置 CSS 的形式，方便歸類和修改。這裏爲了便於初學者理解，將樣式直接寫到元素裏。

結果圖如本文開頭的圖片所示。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。