對角線生成器(Diagonal Generator)用於將兩個點連線起來，連線線是三次貝塞爾曲線，該生成器使用d3.svg.diagonal()建立。有兩個訪問器，source()和target()，還有一個投影函式projection()，用於將座標進行投影。現有資料:

var width = 600;
var height = 400;

var svg = d3.select("#body")
    .append("svg")
    .attr("width",width)
    .attr("height",height)

var dataList = {
    source: { x: 100, y: 100 },
    target: { x: 300, y: 200 }
}
 

source是起點，target是終點，其中包含的是x座標和y座標。接下來將這兩個點用三次貝塞爾曲線連線起來。先定義一個對角線生成器，訪問器都使用預設的。然後新增<path>元素，再使用生成器得到所需要的對角線路徑。程式碼:

//建立一個對角線生成器
var diagonal = d3.svg.diagonal()


//新增路徑
svg.append("path")
    .attr("d",diagonal(dataList))
    .attr("fill","none")
    .attr("stroke","black")
    .attr("stroke-width","3px")
 

資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

結果圖如下:, 左上角的是source起點，右下角的是target終點，中間的曲線有兩個彎。 使用projection()可以定製具有投影的生成器。投影用於將座標進行變換，定義了之後，起點和終點座標都會首先呼叫該投影進行座標轉換，然後再生成路徑。舉個例子:

//使用投影函式
var diagonal = d3.svg.diagonal().projection(function(d){
    var x = d.x * 1.5
    var y = d.y * 1.5
    return [x,y]
})
 

這樣，對於每個起點和終點座標，x座標和y座標都會放大1.5倍，起點座標變為(150,150)，終點座標變為(450,300)。但是，原資料並不會改變，只是在繪製的時候使用投影后的座標。