在绘制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坐标 .x(function(d) { return d[0] }) // 获取每个节点的y坐标 .y(function(d) { return d[1]; });
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
创建直线生成器后，就可以将数据转换为SVG的路径信息，如将上面的data数据转换为“M30,30L330,30L330,330L630,330”，生成一条折线。
// 在SVG上添加折线canvas.append('path') .attr('stroke', '#333') .attr('stroke-width', '2') .attr('fill', 'none') // 设置路径信息 .attr('d', lineGenerator(data));
- 1
- 2
- 3
- 4
- 5
- 6
- 7
有时，我们可能需要将一条路径切割成一段一段的多条路径，这时候就需要用到defined方法，假定输入的数据为[[30, 30], [330, 30],[-1, -1],[330, 330], [630, 330]]，我们需要在[-1, -1]处将折线切割成两条线段，则只需要用defined方法进行判定即可，如下：
var data2 = [[30, 30], [330, 30],[-1, -1],[330, 330], [630, 330]];// 在返回值为false的位置进行切割，并且当前数据不再计入到路径中var line2 = lineGenerator.defined(function(d, i, index) { return d[0] > 0 && d[1] > 0; })(data2);// 将图形添加到画布中 canvas.append('path') .attr('stroke', 'green') .attr('stroke-width', '2') .attr('fill', 'none') .attr('d', line2);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
执行上面的方法后，折线将变为两节线段，如下图所示。
