D3.js 線段生成器 (V3版本)

line.x 和 line.y 可制定規則:如何從資料中獲取x和y座標。這種方法稱為 訪問器 。

line.x 和 line.y 的預設為:

1 function x(d){
2 return d[0]　　　　　　 //第一個值是x座標
3 }
4 
5 function y(d){
6 return d[1] 　　　　　　//第二個值是y座標
7 }

在SVG區域裡，線段元素是: 

1 <line x1="20" y1="20" x2="300" y2="100" />

新增元素時，可以使用 append() ，再設定屬性，如: 

1svg.append("line")
2.attr("x1",20)
3.attr("y1",20)
4.attr("x2",300)
5.attr("y2",100)

還有一種新增直線的方法:使用路徑元素<path>。路徑元素也是可以繪製直線的，例如，相同的直線可用:

1 <path d="M20,20L300,100" />

1 svg.append("path")
2.attr("d","M20,20L300,100")

這樣做雖然是成功繪製了該路徑，但有一個問題:類似M20,20L300,100的字串，是怎麼得到的呢？此處只有兩個點，可以手動輸入。如果有成百上千各店，全部手動輸入，不太方便也不太現實。因此D3中引入了 路徑生成器(Path Generator) 的概念，能夠自動根據資料生成路徑。用於生成線段的程式，叫做 線段生成器(Line Generator)

根據上面的例子，我們對x和y訪問器做一些修改:

 1//建立一個svg畫圖區域
 2var svg = d3.select("#body")
 3.append("svg")
 4.attr("width",600)
 5.attr("height",400)
 6 
 7
 8var lines = [80,120,160,200,240,280]
 9var linePath = d3.svg.line()
10.x(function(d){return d})
11.y(function(d,i){
12return i%2 == 0? 40 : 120
13})
14 
15//新增路徑
16svg.append("path")
17.attr("d",linePath(lines))//使用了線段生成器
18.attr("stroke","black")//線的顏色
19.attr("stroke-width","3px")//線的寬度
20.attr("fill","none")//填充顏色為none

如此，呼叫 linePath(lines) 所得的路徑中，各頂點為:(80,40)、(120,120)、(160,40)、(200,120)、(240,40)、(280,120)。以第一個點為例講一下：

x = 80 (d等80)

y = 0 % 2 == 0 ? 40 : 120 (i等於0,最終表示式的值為40)

以此類推，可計算得到各座標點。結果如圖: 

1 var linePath = d3.svg.line()
2.interpolate("linear-closed")

插值模式，指的是對於線段兩個端點之間的值如何計算。預設的插值模式是 linear ，即線性的。 interpolate 的引數，除預定義的13種模式之外，還可以是一個自己定義的函式。接下來看看線性插值模式(linear)的實現方法:

1 function interpolateLinear(points){
2return points.join("L")
3 }

意思是:對於所有的頂點，在頂點數值之間插入一個 L 作為分隔。其他所有的模式都是使用類似的手法實現的。如下圖展示了不同插值模式下線段的形態，雖然有些已經不是"線段"了，但都是根據線段的頂點生成的。當插值模式為 cardinal 、 cardinal-open 、 cardinal-closed 的時候，可是使用 tension() 設定 張力系數 。程式碼:

step插值模式 :

 1//建立一個svg畫圖區域
 2var svg = d3.select("#body")
 3.append("svg")
 4.attr("width",600)
 5.attr("height",400)
 6
 7 
 8//step插值模式
 9var lines = [80,120,160,200,240,280]
10var linePath = d3.svg.line()
11.interpolate("step")
12.x(function(d){return d})
13.y(function(d,i){
14return i%2 == 0? 40 : 120
15})
16 
17 
18//新增路徑
19svg.append("path")
20.attr("d",linePath(lines))//使用了線段生成器
21.attr("stroke","black")//線的顏色
22.attr("stroke-width","3px")//線的寬度
23.attr("fill","none")//填充顏色為none

效果圖:

 1 //建立一個svg畫圖區域
 2var svg = d3.select("#body")
 3.append("svg")
 4.attr("width",600)
 5.attr("height",400)
 6 
 7 
 8//basis插值模式
 9var lines = [80,120,160,200,240,280]
10var linePath = d3.svg.line()
11.interpolate("basis")
12.x(function(d){return d})
13.y(function(d,i){
14return i%2 == 0? 40 : 120
15})
16 
17//新增路徑
18svg.append("path")
19.attr("d",linePath(lines))//使用了線段生成器
20.attr("stroke","black")//線的顏色
21.attr("stroke-width","3px")//線的寬度
22.attr("fill","none")//填充顏色為none

效果圖:

 1//建立一個svg畫圖區域
 2var svg = d3.select("#body")
 3.append("svg")
 4.attr("width",600)
 5.attr("height",400)
 6 
 7//cardinal插值模式
 8var lines = [80,120,160,200,240,280]
 9var linePath = d3.svg.line()
10.interpolate("cardinal")
11.x(function(d){return d})
12.y(function(d,i){
13return i%2 == 0? 40 : 120
14})
15 
16 
17//新增路徑
18svg.append("path")
19.attr("d",linePath(lines))//使用了線段生成器
20.attr("stroke","black")//線的顏色
21.attr("stroke-width","3px")//線的寬度
22.attr("fill","none")//填充顏色為none

效果圖 :

 1//建立一個svg畫圖區域
 2var svg = d3.select("#body")
 3.append("svg")
 4.attr("width",600)
 5.attr("height",400)
 6 
 7//選擇性的使用頂點資料
 8var lines = [80,120,160,200,240,280]
 9var linePath = d3.svg.line()
10.x(function(d){return d})
11.y(function(d,i){
12return i%2 == 0 ? 40 : 120
13})
14.defined(function(d){
15return d < 200
16})
17 
18//新增路徑
19svg.append("path")
20.attr("d",linePath(lines))//使用了線段生成器
21.attr("stroke","black")//線的顏色
22.attr("stroke-width","3px")//線的寬度
23.attr("fill","none")//填充顏色為none