vue项目使用canvas的框架konvajs绘制一个树形展开图，怎么写树形的json数据结构？

Question

vue项目使用canvas的框架konvajs绘制一个树形展开图，怎么写树形的json数据结构？

需求图片如下：

**现在项目使用的是vue3，自己写json的想法有2种：
1、子级数据放在children对象里，这样的问题就是子级越多，嵌套的层次会很深。
2、所有数据的对象放在一层里，然后通过属性来查找对象之间的关系，如：objectId，parentId
**
哪种方法更常用？

问题2：物体与物体之间的线是否要写json数据，每根线上有:线的名称，线的一些属性

{
    "id": "swj-01",
    "name": "AVWT-190FKFSA",
    "type": "machine",
    "imgUrl": "swj.png",
    "rotation": 45,
    "x": 100,
    "y": 100,
    "width": 100,
    "height": 100,
    "scaleX": 2,
    "scaleY": 1,
    "fill": "red",
    "children": {
        "id": "swj-01",
        "name": "AVWT-190FKFSA",
        "type": "machine",
        "imgUrl": "swj.png",
        "rotation": 45,
        "x": 100,
        "y": 100,
        "width": 100,
        "height": 100,
        "scaleX": 2,
        "scaleY": 1,
        "fill": "red"
    }
}

Answer 1

1、传递给后端的数据结构用一层数据，一层里每个数据之间的关系写清楚，id,parentId,childrenIds，
2、children一层一层的数据结构是前端页面使用的