對角線生成器(Diagonal Generator) 對角線生成器(Diagonal Generator)用於將兩個點連接起來，連接線是三次貝塞爾曲線，該生成器使用d3.svg.diagonal()創建。有兩個訪問器，source()和target()，還有一個投影函數projection()，用於 ...
對角線生成器(Diagonal Generator) 對角線生成器(Diagonal Generator)用於將兩個點連接起來，連接線是三次貝塞爾曲線，該生成器使用d3.svg.diagonal()創建。有兩個訪問器，source()和target()，還有一個投影函數projection()，用於將坐標進行投影。現有數據:
1 var width = 600;
2 var height = 400;
3
4 var svg = d3.select("#body")
5 .append("svg")
6 .attr("width",width)
7 .attr("height",height)
8
9 var dataList = {
10 source: { x: 100, y: 100 },
11 target: { x: 300, y: 200 }
12 }
source是起點，target是終點，其中包含的是x坐標和y坐標。接下來將這兩個點用三次貝塞爾曲線連接起來。先定義一個對角線生成器，訪問器都使用預設的。然後添加<path>元素，再使用生成器得到所需要的對角線路徑。代碼:
1 //創建一個對角線生成器
2 var diagonal = d3.svg.diagonal()
3
4
5 //添加路徑
6 svg.append("path")
7 .attr("d",diagonal(dataList))
8 .attr("fill","none")
9 .attr("stroke","black")
10 .attr("stroke-width","3px")
結果圖如下:, 左上角的是source起點，右下角的是target終點，中間的曲線有兩個彎。
使用projection()可以定製具有投影的生成器。投影用於將坐標進行變換，定義了之後，起點和終點坐標都會首先調用該投影進行坐標轉換，然後再生成路徑。舉個例子:
1 //使用投影函數
2 var diagonal = d3.svg.diagonal()
3 .projection(function(d){
4 var x = d.x * 1.5
5 var y = d.y * 1.5
6 return [x,y]
7 })
這樣，對於每個起點和終點坐標，x坐標和y坐標都會放大1.5倍，起點坐標變為(150,150)，終點坐標變為(450,300)。但是，原數據並不會改變，只是在繪製的時候使用投影後的坐標。
