線段

在SVG中，線段的元素是<line>，或者<path>也可以繪製線段。所以d3程式碼為如下形式：

// line形式新增線段
svg.append("line")
        .attr("x1", 20).attr("y1", 20)
        .attr("x2", 300).attr("y2", 100)
        .attr("stroke", "black");
// path形式新增線段
svg.append("path")
        .attr("d", "M20,20L300,100")
        .attr("stroke", "black");
 

如果存在多個點的情況，可以使用d3的“line生成器”。如下：

// 線段的點資料，每一項是一個點的X和Y座標
var points = [[80, 80], [200, 100], [200, 200], [100, 200]];

// 建立一個線段生成器
var linePath = d3.line();

// 新增路徑
svg.append("path")
        .attr("d", linePath(points))
        .attr("stroke", "black")
        .attr("fill", "none");

• d3.line()——建立一個線段生成器；
• line(data)——使用指定的資料生成一條線，給定的資料順序應該按照x值排序好；
• line.x([x])——設定或獲取線段的x座標訪問器；
• line.y([y])——設定或獲取線段的y座標訪問器；
• line.defined([defined])——設定或獲取defined訪問器，這個訪問器用於指定在資料缺失的時候該如何操作。預設的訪問器假定所有的輸入資料都是正義的；
• line.curve([curve])——設定線段的曲線模式，即兩個點之間如何連線。預設為curveLinear（線性插值，折線模式）；

line.x()和line.y()是訪問器，用於獲取資料。預設定義如下：

.x(function(d){ return d[0]; })
.y(function(d)
 
{ return d[1]; })

也可以自定義需要返回的資料，如下：

var linePath = d3.line()
        .x(function(d){ return d[0]; })
        .y(function(d, i){ return i%2==0 ? 40 : 120; })

defined()預設返回為true，即所有的點都認為是需要繪製的。可以通過defined()來篩除不需要的資料。例如：

var linePath = d3.line()
        .defined(function(d){
           if(d[0] >= 100){ return true; }
        });

上面的程式碼就把第一個點給排除了，不再繪製。
line.curve()設定曲線模式，預設為line.curve(d3. curveLinear)，即點之間以直線相連。曲線模式包括：

• d3.curveLinear——線性插值，那就是折線；
  

• d3.curveLinearClosed——閉合的折線
  

• d3.curveMonotoneX——生成一個在y方向保持單調性的曲線；
  

• d3.curveMonotoneY——生成一個在x方向保持單調性的曲線
  

• d3.curveNatural——生成一個“自然的三次曲線”，曲線在終點的二階導數為0；
  

• d3.curveStep——臺階狀的折線。y值在兩個相鄰的點x值中間點發生變化；
  

• d3.curveStepAfter——臺階狀(step function)的折線，注意y值變化的位置；
  

• d3.curveStepBefore——臺階狀(step function)的折線，注意y值變化的位置；
  

區域

如同線段的生成，D3提供了區域生成器d3.area()來定義個區域。對於線段來說，需要提供點的x座標和y座標。所以，d3.line()有兩個資料訪問器x()和y()。而對於area()來說，有六個資料訪問器，分別是：
第一組：x，y0，y1；
第二組：y，x0，x1；

從二維的角度來說，區域是由兩條邊界線閉合而成的，邊界線可以是曲線也可以是直線。無論哪種形式，通常來說兩條線共享一個x座標，所不同的只是y座標（即y0和y1）。如下圖所示：

所以我們在定義區域的時候，需要定義這三個資料訪問器該如何取值。以y軸為基準來說，共享的就是y座標，不同的是x座標（x0和x1）。通常來說，y0是一個常量。如下程式碼：

var dataset = [80, 120, 130, 70, 60, 90];

// 建立一個區域生成器
var areaPath = d3.area()
        .x(function(d, i){ return 50+i*80; })
        .y0(function(d, i){ return height/2; })
        .y1(function(d, i){ return height/2-d; });

// 新增路徑
svg.append("path")
        .attr("d", areaPath(dataset))
        .attr("stroke", "black")
        .attr("fill", "yellow");

和線段一樣，也有area.curve()來設定插值模式。