D3形状(一)：直线生成器

最新推荐文章于 2024-08-12 08:35:44 发布

蚁方阵

最新推荐文章于 2024-08-12 08:35:44 发布

阅读量1.1w

点赞数 2

分类专栏： d3应用专题文章标签： d3 可视化 d3应用专题

本文链接：https://blog.csdn.net/yiifaa/article/details/52239960

版权

D3.js中的直线生成器不直接绘制SVG图形，而是生成SVG路径信息。d3.line用于创建直线，将数据转化为路径字符串，如'M30,30L330,30L330,330L630,330'。通过defined方法，可以在特定条件（如数据点为[-1, -1]）下将直线切割为多个线段，实现路径切割效果。" 114121971,10540467,Java程序实现用户输入数字验证,"['Java', '输入验证', '控制流', '异常处理']

摘要由CSDN通过智能技术生成

在绘制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坐标