javascript - 求助，如何高效实现代码绘图？

Question

求助，现有一需求是绘制一个固定流程的流程图，样例图如下：

而实际图中的输入、线条更多、更复杂，请问各位大佬除了用canvas画图之外，还有什么方法能够完成图的绘制？

我使用过canvas+html写法，直线采用canvas，拐线采用div、border:none、border-radius等绘制，但代码体量非常大，寻求更高效的解决方法！

（ps:矩形图在实际中使用的是图片）

Answer 1

要绘制复杂的流程图，除了使用Canvas和HTML的手动绘制方法外，还有一些更高效的工具和库可以帮助你完成这一任务。以下是推荐的方法：

D3.js 是一个功能强大的JavaScript库，可以帮助你以数据驱动的方式生成动态和交互式图表，包括流程图。

// 引入D3.js库<script src="https://d3js.org/d3.v6.min.js"></script>// 绘制流程图示例<script>  const svg = d3.select("body").append("svg")      .attr("width", 960)      .attr("height", 500);  const data = [    {name: "开始", x: 50, y: 50},    {name: "步骤1", x: 150, y: 150},    {name: "步骤2", x: 250, y: 250},    // ... 继续添加节点  ];  const links = [    {source: 0, target: 1},    {source: 1, target: 2},    // ... 继续添加链接  ];  const nodes = svg.selectAll("circle")      .data(data)      .enter().append("circle")      .attr("cx", d => d.x)      .attr("cy", d => d.y)      .attr("r", 20);  const edges = svg.selectAll("line")      .data(links)      .enter().append("line")      .attr("x1", d => data[d.source].x)      .attr("y1", d => data[d.source].y)      .attr("x2", d => data[d.target].x)      .attr("y2", d => data[d.target].y)      .attr("stroke", "black");</script>

Answer 2

高效实现代码绘图，特别是复杂的流程图，通常需要考虑使用专门的绘图库或者框架。这些库和框架提供了丰富的绘图工具和接口，使得绘图过程更为简单和高效。以下是一些建议的方法：

1. 使用SVG (Scalable Vector Graphics)
   SVG是一种基于XML的矢量图像格式，可以直接嵌入到HTML中。它非常适合用于绘制流程图，因为它支持各种形状、线条和文本，并且可以方便地进行缩放和转换。使用SVG，你可以通过定义各种元素的属性和样式来绘制复杂的流程图。
2. 使用D3.js
   D3.js是一个强大的JavaScript库，用于生成基于数据的文档。它允许你绑定任意数据到DOM，然后应用数据驱动的转换来创建复杂的可视化。虽然D3.js的学习曲线可能有些陡峭，但它提供了极高的灵活性和控制能力，可以创建出非常精细和自定义的流程图。
3. 使用GoJS
   GoJS是一个用于构建交互式图表和图形的JavaScript库。它提供了丰富的预定义模板和强大的API，使得创建流程图变得相对简单。GoJS支持多种类型的节点和链接，并且允许你自定义它们的外观和行为。
4. 使用Vis.js
   Vis.js是一个灵活的、易于使用的JavaScript库，用于创建各种网络图、关系图、时间线和条形图等。它支持多种类型的节点和边，并且允许你通过简单的配置和API调用来生成复杂的流程图。
5. 使用流程图工具生成代码
   有些在线的流程图工具允许你通过拖拽和放置节点来创建流程图，并且可以导出为代码。这些工具通常支持多种输出格式，包括SVG、Canvas或自定义的JavaScript库。这种方法可以快速生成流程图，但可能不如直接使用绘图库那样灵活。

在选择具体的方法时，你需要考虑你的项目需求、技术栈和团队对所选技术的熟悉程度。每种方法都有其优点和局限性，所以最好根据你的具体情况来做出选择。