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

對角線生成器(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)。可是，原數據並不會改變，只是在繪製的時候使用投影后的座標。