Javascript 使用画布或SVG绘制JSON树

我需要创建一个状态机解析器，我已经做了，它用给定的自动机验证一个单词，它还生成一个分析树，毕竟我唯一要做的就是计算它达到的最终状态的总数，如果它大于1，那么这个单词是有效的，问题是现在我必须画出进入每一个最终状态的路径

如果我验证单词“ab”，这将生成一个json对象，其中包含：

{
 "a": {
      "0": {
           "b": [
                "0",
                "1",
                "2"
                ]
            },
      "3": {
           "b": false
            }
        }
 }

所以，真正的问题是如何从这个JSON传递

为此：

在这里，你可以看到生成的所有路径是什么，我只计算最终状态的总数，这表明是否是一个有效的字，所以所有的路径都必须被绘制，并且正确的路径（以最终状态结束的路径）必须被标记为不同的，这样就很容易看到

另外，如果您对json对象的结构有更好的了解，可以很容易地绘制它，那么我在修改函数以生成不同的结构方面没有问题

我很想用Canvas或SVG来实现，但我不知道该怎么做，这将是一个免费的工具，用于学习机器是如何工作的

---

谢谢你的帮助

这是一个相当广泛的问题。你可以从头开始（我个人建议使用SVG而不是Canvas），也可以使用Raphael.js或D3.js之类的库（或者其他很多库）。如果你有时间学习曲线，请查看D3库，这是一个相当广泛的问题。你可以从头开始（我个人建议使用SVG而不是Canvas），也可以使用Raphael.js或D3.js之类的库（或者其他很多库）。如果你有时间学习曲线，请查看D3库