Javascript 用于构建JSON树的简单JS图形编辑器

我需要在我的web应用程序上显示一系列问题。这些问题可以遵循树状结构（即：如果您对问题1回答“是”，则转到问题2，否则转到问题3）。想想“你是书中的英雄”

我为我的数据使用了一个JSON树模型，到目前为止，一切都很完美

然而，JSON输入可能会变得非常大和复杂，并且设置它对用户不友好，而且非常容易出错，因此我考虑构建一个编辑器，帮助生成JSON，然后在我的应用程序中使用

基本上，我的问题是：制作一个可以输出JSON的极其简单的图形编辑器的最佳方法是什么

我已经研究了几个选项：使用画布从头开始构建，使用绘图库（p5、d3…）完成繁重的工作，或者使用图表构建库（MxGraph、gojs…）。我的猜测是，使用这些库是我最好的选择，但为这样一个简单的用例学习这些库感觉像是一笔巨大的时间投资

举个例子，我使用一个简单的JSON生成我的问题：

{
    "Data": {
        "Question": "Question 1",
        "QuestionType": "Options",
        "Answers": [
            "yes",
            "no"
        ]
    },
    "Children": [
        {
            "Data": {
                "Question": "Question 2",
                "QuestionType": "Options",
                "Answers": [
                    "yes",
                    "no"
                ]
            },
            "Children": [
                {
                    "Data": {
                        "Question": "Question 3",
                        "QuestionType": "Options",
                        "Answers": [
                            "yes",
                            "no"
                        ]
                    },
                    "Children": [
                        {
                            "Data": {
                                "Question": "Question 3a",
                                "QuestionType": "Text",
                                "Answers": [
                                    "Type in your answer"
                                ]
                            },
                            "Children": []
                        }
                    ]
                },
                {
                    "Data": {
                        "Question": "Question 3",
                        "QuestionType": "Options",
                        "Answers": [
                            "yes",
                            "no"
                        ]
                    },
                    "Children": [
                        {
                            "Data": {
                                "Question": "Question 3a",
                                "QuestionType": "Text",
                                "Answers": [
                                    "Type in your answer"
                                ]
                            },
                            "Children": []
                        }
                    ]
                }
            ]
        },
        {
            "Data": {
                "Question": "Question 2",
                "QuestionType": "Options",
                "Answers": [
                    "yes",
                    "no"
                ]
            },
            "Children": [
                {
                    "Data": {
                        "Question": "Question 3",
                        "QuestionType": "Options",
                        "Answers": [
                            "yes",
                            "no"
                        ]
                    },
                    "Children": [
                        {
                            "Data": {
                                "Question": "Question 3a",
                                "QuestionType": "Text",
                                "Answers": [
                                    "Type in your answer"
                                ]
                            },
                            "Children": []
                        }
                    ]
                },
                {
                    "Data": {
                        "Question": "Question 3",
                        "QuestionType": "Options",
                        "Answers": [
                            "yes",
                            "no"
                        ]
                    },
                    "Children": [
                        {
                            "Data": {
                                "Question": "Question 3a",
                                "QuestionType": "Text",
                                "Answers": [
                                    "Type in your answer"
                                ]
                            },
                            "Children": []
                        }
                    ]
                }
            ]
        }
    ]
}

正如你所看到的，这对于一个非常直截了当的民意调查来说是相当大的

我需要显示一个画布，用户可以在其中放置具有可编辑信息（问题、问题类型、答案）的块，并链接这些块以显示父/子关系。然后将该图转换为JSON对象，如前所示（但这应该是最简单的部分）。诸如此类：

我正在与angular 6合作获取信息

我相信我可能忽略了一些简单的选项来做我想做的事情（可能这个模型一开始就太复杂了），所以任何见解或帮助都将不胜感激

---

非常感谢

根据我的经验，大多数调查问卷都是通用的DAG，而不是树，因此您可以使用一个简单的模型，其中包含一个线性节点列表（无

子节点

）和标签（

如果回答=是转到问题X

）。这很容易编辑（就像文本一样），或者，如果你想让它看起来很酷的话，使用d3.js（例如）非常简单。谢谢。我用了一棵树，因为我需要能够来回导航，当时看起来很简单，但这是一个很好的观点。d3的例子看起来很棒，如果它看起来像他们做的那么简单，那很可能就是我所需要的全部