对角线生成器 (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")
结果图如下:, 左上角的是 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). 但是, 原数据并不会改变, 只是在绘制的时候使用投影后的坐标.
来源: http://www.bubuko.com/infodetail-3061490.html