D3.js学习总结（五）——基本绘制（1）

线段

在SVG中，线段的元素是<line>，或者<path>也可以绘制线段。所以d3代码为如下形式：

// line形式添加线段
svg.append("line")
        .attr("x1", 20).attr("y1", 20)
        .attr("x2", 300).attr("y2", 100)
        .attr("stroke", "black");
// path形式添加线段
svg.append("path")
        .attr("d", "M20,20L300,100")
        .attr("stroke", "black");

如果存在多个点的情况，可以使用d3的“line生成器”。如下：

// 线段的点数据，每一项是一个点的X和Y坐标
var points = [[80, 80], [200, 100], [200, 200], [100, 200]];

// 创建一个线段生成器
var linePath = d3.line();

// 添加路径
svg.append("path")
        .attr("d