在绘制SVG的图形上,D3并不直接在SVG画布上生成图形,而是根据输入的数据产生相关的SVG路径信息,所以,D3所有的形状并非是可见的SVG图形,而是一系列的SVG图形生成器,或者说是一系列的SVG图形生成函数。
直线是可视化的基本元素,在d3第4版中,主要靠路径(path)来实现,d3的直线生成器是d3.line,下面我们看它具体用法。
var data = [[30, 30], [330, 30],[330, 330], [630, 330]],
canvas = d3.select('#canvas'), // 页面中已经存在id为canvas的SVG元素
// 创建直线生成器
lineGenerator = d3.line()
// 获取每个节点的x坐标