使用D3.js製作表格方法介紹

D3是目前最受歡迎的JavaScript視覺化圖表庫之一，D3的圖表類型非常豐富，並且支援SVG格式，因此應用十分廣泛，也有很多圖表插件基於D3開發，例如MetricsGraphics.js，在D3上構建的數據圖表非常強大。

D3是用於資料視覺化的Javascript函式庫。使用SVG，Canvas和HTML。結合強大的視覺化技術和數據驅動的DOM操作方法。

D3與JQuery的區別D3是資料驅動的，JQuery不是：我們使用JQuery直接操縱元素；但是使用D3
時我們需要透過D3專有的data()，enter()和exit ()方法提供資料和回調，然後D3操作元素。 D3通常用於資料視覺化；JQuery用於建立Web應用。 D3有很多資料視覺化擴充；JQuery有很多Web應用程式插件。兩者都是Javascript DOM操作庫，提供CSS選擇器和流暢的API。

What is the difference between D3 and JQuery?

#最常用的方法

d3.select(selector)：選擇第一個符合selector的元素。如果沒有符合的元素，則傳回一個空的選擇（但不是null或undefined）。

d3.selectAll(selector)：與select()不同的是，會選擇所有符合的元素。

selection.append(type)：如果指定的type是字串，則將這個type（標籤名稱）作為新元素附加到每個選取元素的最後一個子元素。

selection.attr(name, [value])：value確定時，將selection中名為name的屬性值設為value。 value可以為常數或方法。如果value沒有給出，則傳回selection中第一個非空元素的name屬性目前值。

selection.data([data[,key]])：將資料和元素綁定起來，並傳回一個新的selection。

selection.enter()：傳回enter selection。此時DOM元素少於對應的資料。用於新增缺少的DOM元素。例如：

var p = d3.select("body")
  .selectAll("p")
  .data([4, 8, 15, 16, 23, 42])
  .enter().append("p")
  .text(function(d) { return d; });

如果body是空的，上面的程式碼就會根據資料建立新的p元素，然後加入到body元素中，並將文字內容設定為對應的數字。頁面結果如下：

 <p>4</p>
 <p>8</p>
 <p>15</p>
 <p>16</p>
 <p>23</p>
 <p>42</p>

selection.exit()：傳回exit selection。此時DOM元素多於對應的數據。用於移除多餘的DOM元素。例如，基於上面的例子，我們要更新資料：

p = p.data([1, 2, 4, 8, 16, 32], function(d) { return d; } );

因為此時指定了key方法（用於指定資料和元素匹配的順序等），並且資料[4,8,16]匹配已經存在的元素，所以update selection只包含3個p元素。我們可以使用enter selection新增3個新元素：

p.enter().append("p").text(function(d) { return d; });

然後，還需要移除不需要的元素[15, 23, 42]：

p.exit().remove();

頁面結果：

 <p>1</p>
 <p>2</p>
 <p>4</p>
 <p>8</p>
 <p>16</p>
 <p>32</p>

製作長條圖

#長條圖範例

使用D3的時候，要對SVG的結構有個了解。要繪出什麼圖形，需要用到什麼標籤，標籤需要定義什麼屬性。
例如，製作一個長條圖，主要是XY座標軸和長條。 XY軸用到line標籤繪製直線，以及text標籤顯示刻度的文字。柱形用到rect標籤繪製長方形，那如果要帶圓角的長方形，我們可以設定rect標籤的rx或ry屬性，如果要定義長方形的位置，需要設定x和y屬性等。就這樣，一部分一部分的組合到一起成為一張圖。

以下的內容是基於D3 3.x 的API，有些介面跟D3 4.0是不同的。
D3 3.x API Reference
D3 4.0 API Reference

根部的svg

##D3繪圖首先要建立一個svg元素並定義寬高等屬性：

var svg = d3.select(id).append("svg")
  .attr('class', 'svg_timeline')
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom);

座標軸

製作座標軸首先需要用到D3的比例尺。用到方法 axis.scale([scale]) ，設定座標軸的比例尺，或傳回目前的比例尺。比例尺分為：

定量比例尺：連續的數據，如數字。時間比例尺：資料是時間。序數比例尺：離散的數據，例如名稱，類別等。

例如我們要製作一個有時間刻度的X軸和一個數字刻度的Y軸，就可以使用時間比例尺和定量比例尺，或者更具體的說，線性比例尺。

d3.scale.linear()：建立一個線性比例尺。 d3.time.scale()：建立一個時間比例尺。刻度和刻度格式配置為本地時間。

確定比例尺之後還需要設定輸入域和輸出範圍。例如一個x軸的比例尺為：

var x = d3.time.scale()
  .range([0, 坐标轴的宽度])
  .domain(最小日期, 最大日期);

最小日期和最大日期都是Date物件。然後設定X座標軸的比例尺並建立它：

//生成x坐标轴
var xAxis = d3.svg.axis()    //新建一个默认的坐标轴
  .scale(x)    //设置比例尺
  .ticks(d3.time.day, 1)   //指定刻度生成的方式
  .tickFormat(function(d){  //自定义刻度文字格式
    var month = d.getMonth() + 1;
    return month+'月'+ d.getDate() +'日';
  })
  .tickPadding([15]) //坐标轴线与文字之间的距离
  .tickSize(-height)
  .orient("bottom"); //位置

ticks的參數類型取決於對應的比例尺的類型，這裡傳的參數是時間間隔，也就是說刻度與刻度之間是相隔一天的。

tickFormat則讓我們可以自訂刻度的文字格式。

值得一说的是，如果数据中对应X轴的数据是字符串，比如‘2017-08-12'。那绑定到页面上的数据是需要被处理的。D3提供解析日期的接口以及日期格式化的接口。

format.parse(string)：把一个字符串string解析为一个日期。 d3.time.format(specifier)：根据给定的specifier创建一个当地时间格式化。

比如：

var parseDate = d3.time.format("%Y-%m-%d").parse; //时间解析器
var date = parseDate('2017-08-12'); //将字符串解析成日期

最后，在svg元素中添加坐标轴：

//添加X轴元素
svg.append("g")
  .attr("class", "axis x")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

selection.call(function[, arguments…])方法调用指定的方法一次，并把selection跟随参数一起传递到方法中。

柱状图中的长方形
具体步骤：将数据跟页面元素绑定，并创建所需要的页面元素，具体设置每个页面元素的样式位置，以及事件监听等。

//添加条形的元素
var bars = svg.selectAll(".barRect")
  .data(ddata)  //绑定数据
  .enter().append("g")  //创建缺少的页面元素
  .attr('class', 'barRect')
  .attr("id", function(d, i) {
    return "barRect-" + i;
  });          

//定义矩形的位置
//x为矩形最左端的位置
//y为矩形最顶端的位置
bars.append("rect")
  .attr('class','bar-rect')
  .attr("width",16)  //长方形的宽度
  .attr("y", function(d) {
    return y(d.value);   //使用比例尺确定坐标Y值
  })
  .attr("x", function(d) {
    return x(d.date) - 8;  //使用比例尺确定坐标X值
  })
  .attr("height", function(d) {  //条形的高度
    return height - y(d.value);
  })
  .attr('rx',10) //圆角
  .attr('ry',10) //圆角
  .attr('fill','url(#linear-gradient)'); //填充渐变色

以上是使用D3.js製作表格方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！