D3.js 对角线生成器 (V3版本)
对角线生成器(Diagonal Generator) 对角线生成器(Diagonal Generator) 用于将两个点连接起来,连接线是三次贝塞尔曲线,该生成器使用d 3.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