console
const source = { "configure": { "width": 1280, "height": 720, "frameRate": 30, "definition": 720, "version": [5, 0, 0], "aspect": { "num": 16, "den": 9 } }, "footage": { "comps": [{ "id": "composition-1", "type": "composition", "direction": 0, "width": 0, "height": 0, "duration": 26533, "frameRate": 30, "transitions": [], "layers": [{ "id": "layer-image-1", "name": "layer-image-1", "tag": "", "type": "image", "x": 0, "y": 0, "volume": 1, "layerIndex": 1, "sourceId": "image-1", "width": 1280, "height": 720, "alpha": 1, "rotation": 0, "showRange": { "start": 0, "end": 26533 }, "clipRange": { "start": 0, "end": 0 }, "anchor": { "x": 0, "y": 0 }, "scale": { "x": 1, "y": 1 } }] }, { "id": "comp-main", "type": "composition", "direction": 1, "width": 1280, "height": 720, "duration": 26533, "frameRate": 30, "transitions": [{ "id": "layer-transition-1", "sourceId": "62450e8bc274939c93e989ba", "inPoint": 5000, "outPoint": 6000, "sceneIn": "layer-video-2", "sceneOut": "layer-video-1" }, { "id": "layer-transition-2", "sourceId": "62450e8bc274939c93e989ab", "inPoint": 7933, "outPoint": 8933, "sceneIn": "layer-video-3", "sceneOut": "layer-video-2" }, { "id": "layer-transition-1", "sourceId": "62450e8bc274939c93e989a6", "inPoint": 15733, "outPoint": 16733, "sceneIn": "gen-1650282164373-83067", "sceneOut": "layer-video-3" }, { "id": "layer-transition-1", "sourceId": "62450e8bc274939c93e989a7", "inPoint": 1967, "outPoint": 2967, "sceneIn": "layer-video-1", "sceneOut": "gen-1650278507021-30348" }], "layers": [{ "id": "layer-video-1", "name": "layer-video-1", "tag": "", "type": "video", "x": 0, "y": 0, "volume": 0.16, "layerIndex": 1, "sourceId": "video-1", "width": 1280, "height": 720, "alpha": 1, "rotation": 0, "showRange": { "start": 2467, "end": 5500 }, "clipRange": { "start": 135, "end": 3168 }, "anchor": { "x": 0, "y": 0 }, "scale": { "x": 0.6666666666666666, "y": 0.6666666666666666 } }, { "id": "layer-video-2", "name": "layer-video-2", "tag": "", "type": "video", "x": -0.015523151882859968, "y": 0.00001541991063660369, "volume": 0.01, "layerIndex": 2, "sourceId": "video-2", "width": 1280, "height": 720, "alpha": 1, "rotation": 0, "showRange": { "start": 5500, "end": 8433 }, "clipRange": { "start": 3064, "end": 5997 }, "anchor": { "x": 0, "y": 0 }, "scale": { "x": 0.6666666666666666, "y": 0.6666666666666666 } }, { "id": "layer-video-3", "name": "layer-video-3", "tag": "", "type": "video", "x": 0.00006781684016549448, "y": 0.00001695421014663921, "volume": 0.01, "layerIndex": 3, "sourceId": "video-3", "width": 1280, "height": 720, "alpha": 1, "rotation": 0, "showRange": { "start": 8433, "end": 16233 }, "clipRange": { "start": 6000, "end": 13800 }, "anchor": { "x": 0, "y": 0 }, "scale": { "x": 0.6666666666666666, "y": 0.6666666666666666 } }, { "id": "gen-1650278507021-30348", "name": "gen-1650278507021-30348", "tag": "", "type": "video", "x": 12.750014153079745, "y": 7.171875884567463, "volume": 0.23, "layerIndex": 4, "sourceId": "gen-1650278507021-96368", "width": 1254.5040407042572, "height": 705.658522896145, "alpha": 1, "rotation": 0, "showRange": { "start": 0, "end": 2467 }, "clipRange": { "start": 2457, "end": 4924 }, "anchor": { "x": 0, "y": 0 }, "scale": { "x": 0.326693760600067, "y": 0.3266937606000671 } }, { "id": "gen-1650282164373-83067", "name": "gen-1650282164373-83067", "tag": "", "type": "video", "x": -0.00006028163585861078, "y": 0.00006028163585861078, "volume": 0.01, "layerIndex": 5, "sourceId": "gen-1650282164373-76656", "width": 1280, "height": 720, "alpha": 1, "rotation": 0, "showRange": { "start": 16233, "end": 26533 }, "clipRange": { "start": 13800, "end": 24100 }, "anchor": { "x": 0, "y": 0 }, "scale": { "x": 0.6666666666666666, "y": 0.6666666666666666 } }] }, { "id": "gen-1650282669689-65303", "type": "composition", "direction": 0, "width": 1280, "height": 720, "duration": 26533, "frameRate": 30, "transitions": [], "layers": [{ "id": "layer-audio-1", "name": "layer-audio-1", "tag": "", "type": "audio", "x": 0, "y": 0, "volume": 0.19, "layerIndex": 1, "sourceId": "audio-1", "width": 1, "height": 1, "alpha": 1, "rotation": 0, "showRange": { "start": 0, "end": 2467 }, "clipRange": { "start": 0, "end": 2467 }, "anchor": { "x": 0, "y": 0 }, "scale": { "x": 1, "y": 1 } }, { "id": "gen-1650282960449-91296", "name": "gen-1650282960449-91296", "tag": "", "type": "audio", "x": 0, "y": 0, "volume": 0.01, "layerIndex": 2, "sourceId": "gen-1650282960449-90923", "width": 1, "height": 1, "alpha": 1, "rotation": 0, "showRange": { "start": 2467, "end": 5467 }, "clipRange": { "start": 2467, "end": 5467 }, "anchor": { "x": 0, "y": 0 }, "scale": { "x": 1, "y": 1 } }, { "id": "layer-audio-2", "name": "layer-audio-2", "tag": "", "type": "audio", "x": 0, "y": 0, "volume": 0.19, "layerIndex": 3, "sourceId": "audio-2", "width": 1, "height": 1, "alpha": 1, "rotation": 0, "showRange": { "start": 5467, "end": 26533 }, "clipRange": { "start": 5467, "end": 26533 }, "anchor": { "x": 0, "y": 0 }, "scale": { "x": 1, "y": 1 } }] }, { "id": "gen-1650587191210-65326", "type": "composition", "direction": 0, "width": 1280, "height": 720, "duration": 7400, "frameRate": 30, "transitions": [], "layers": [{ "id": "gen-1650587690552-18669", "name": "gen-1650587690552-18669", "tag": "", "type": "image", "x": 490, "y": 210, "volume": 1, "layerIndex": 1, "sourceId": "gen-1650587690552-41665", "width": 300, "height": 300, "alpha": 1, "rotation": 0, "showRange": { "start": 0, "end": 3000 }, "clipRange": { "start": 0, "end": 0 }, "anchor": { "x": 0, "y": 0 }, "scale": { "x": 1, "y": 1 } }, { "id": "layer-image-2", "name": "layer-image-2", "tag": "", "type": "image", "x": 320, "y": 40, "volume": 1, "layerIndex": 2, "sourceId": "image-2", "width": 640, "height": 640, "alpha": 1, "rotation": 0, "showRange": { "start": 4400, "end": 7400 }, "clipRange": { "start": 0, "end": 0 }, "anchor": { "x": 0, "y": 0 }, "scale": { "x": 1, "y": 1 } }] }, { "id": "gen-1650595186364-63976", "type": "composition", "direction": 0, "width": 1280, "height": 720, "duration": 18500, "frameRate": 30, "transitions": [], "layers": [{ "id": "gen-1650595186365-73999", "name": "gen-1650595186365-73999", "tag": "", "type": "image", "x": 340, "y": 60, "volume": 1, "layerIndex": 1, "sourceId": "gen-1650595186365-05771", "width": 600, "height": 600, "alpha": 1, "rotation": 0, "showRange": { "start": 8967, "end": 11967 }, "clipRange": { "start": 0, "end": 0 }, "anchor": { "x": 0, "y": 0 }, "scale": { "x": 1, "y": 1 } }, { "id": "gen-1650595194472-21026", "name": "gen-1650595194472-21026", "tag": "", "type": "image", "x": 390, "y": 245, "volume": 1, "layerIndex": 2, "sourceId": "gen-1650595194472-81039", "width": 500, "height": 230, "alpha": 1, "rotation": 0, "showRange": { "start": 12266.666666666668, "end": 15266.666666666668 }, "clipRange": { "start": 0, "end": 0 }, "anchor": { "x": 0, "y": 0 }, "scale": { "x": 1, "y": 1 } }, { "id": "layer-image-3", "name": "layer-image-3", "tag": "", "type": "image", "x": 38.78048780487809, "y": 185.60975609756093, "volume": 1, "layerIndex": 3, "sourceId": "image-3", "width": 500, "height": 500, "alpha": 1, "rotation": 0, "showRange": { "start": 15500.000000000002, "end": 18500 }, "clipRange": { "start": 0, "end": 0 }, "anchor": { "x": 0, "y": 0 }, "scale": { "x": 1, "y": 1 } }, { "id": "layer-text-1", "name": "layer-text-1", "tag": "", "type": "text", "x": 429.6226415094337, "y": 83.28301886792451, "volume": 1, "layerIndex": 4, "sourceId": "text-1", "width": 300, "height": 52, "alpha": 1, "rotation": 0, "showRange": { "start": 4400, "end": 7400 }, "clipRange": { "start": 0, "end": 0 }, "anchor": { "x": 0, "y": 0 }, "scale": { "x": 1, "y": 1 } }] }], "colors": [], "images": [{ "id": "image-1", "type": "image", "url": "https://img.miaotui.com/common/mtv/2022/04/01/11/38e97c1aa403361e312e486d3f90ea21.jpeg", "usage": 1 }, { "id": "gen-1650587690552-41665", "type": "image", "url": "https://img.miaotui.com/editor/material/2022/04/22/08/9670ba0adbe43981d548f1e7c360c811.gif", "animationConfig": "https://img.miaotui.com/editor/task/2022/04/22/08/a7121de625a410d4557041d086493a75.json", "usage": 1 }, { "id": "image-2", "type": "image", "url": "https://img.miaotui.com/editor/material/2022/04/22/08/cac9bb162d6a7195b3d336f16962f942.webp", "animationConfig": "https://img.miaotui.com/editor/task/2022/04/22/08/b70751e0e67a533b596beb037cc9d283.json", "usage": 1 }, { "id": "gen-1650595186365-05771", "type": "image", "url": "https://img.miaotui.com/editor/material/2022/04/22/10/b49f26ed1805c9d5cbd5e09408e69611.gif", "animationConfig": "https://img.miaotui.com/editor/task/2022/04/22/10/c40fc07e84b1763da9ec015add96380c.json", "usage": 1 }, { "id": "gen-1650595194472-81039", "type": "image", "url": "https://img.miaotui.com/editor/material/2022/04/22/10/d1e8d9f82307e5449775b2afd7d18cd3.gif", "animationConfig": "https://img.miaotui.com/editor/task/2022/04/22/10/73a6e170e1a55b829a7b45b23d77b800.json", "usage": 1 }, { "id": "image-3", "type": "image", "url": "https://img.miaotui.com/editor/material/2022/04/22/10/2cacb6763b9fa433d033f0a9a7bcc627.gif", "animationConfig": "https://img.miaotui.com/editor/task/2022/04/22/10/93937ac713dafaa600a80fde41fb482d.json", "usage": 1 }], "videos": [{ "id": "video-1", "type": "video", "url": "https://vod.miaotui.com/editor/material/2022/04/08/14/de2f726be024b3dfc1fc7a0f90f309ca.mp4", "usage": 1 }, { "id": "video-2", "type": "video", "url": "https://vod.miaotui.com/editor/material/2022/04/08/14/de2f726be024b3dfc1fc7a0f90f309ca.mp4", "usage": 1 }, { "id": "video-3", "type": "video", "url": "https://vod.miaotui.com/editor/material/2022/04/08/14/de2f726be024b3dfc1fc7a0f90f309ca.mp4", "usage": 1 }, { "id": "gen-1650278507021-96368", "type": "video", "url": "https://vod.miaotui.com//common/mtv/2022/03/31/22/5d2123a577def85e01ed0c8199199149.mp4", "usage": 1 }, { "id": "gen-1650282164373-76656", "type": "video", "url": "https://vod.miaotui.com/editor/material/2022/04/08/14/de2f726be024b3dfc1fc7a0f90f309ca.mp4", "usage": 1 }], "gifs": [], "audios": [{ "id": "audio-1", "type": "audio", "url": "https://mus.miaotui.com//common/mtv/2022/03/31/18/a6b0cc273c676776f43d077462b4a911.mp3", "usage": 1 }, { "id": "gen-1650282960449-90923", "type": "audio", "url": "https://mus.miaotui.com//common/mtv/2022/03/31/18/a6b0cc273c676776f43d077462b4a911.mp3", "usage": 1 }, { "id": "audio-2", "type": "audio", "url": "https://mus.miaotui.com//common/mtv/2022/03/31/18/a6b0cc273c676776f43d077462b4a911.mp3", "usage": 1 }], "texts": [{ "id": "text-1", "type": "text", "contents": ["请输入文字"], "maxLines": 0, "styleId": "style-1", "usage": 1 }], "styles": [{ "id": "style-1", "type": "style", "fontSize": 40, "hAlign": "center", "kerning": 0, "leading": 0, "fontDesc": { "style": "normal", "family": "三极行楷简体-粗", "url": "https://res-ws.doupai.cc/bhb/2022/03/23/1817fb6564ba025972348.ttf" }, "patterns": [{ "style": 0, "color": "#e60909", "alpha": 1 }] }], "transitions": [{ "id": "62450e8bc274939c93e989ba", "type": "transition", "name": "MotionBlur Up", "url": "https://res.miaotui.com/mtv/2022/03/31/09/972c08703d70145a12f28ce72a8562d2/MotionBlur_Directional_Up_gles.glsl", "paramsTypes": {}, "defaultParams": {}, "usage": 1 }, { "id": "62450e8bc274939c93e989ab", "type": "transition", "name": "Move Right", "url": "https://res.miaotui.com/mtv/2022/04/02/16/4e6f2195cf13018164eb36fbb42343de/DirectionalMove_Right_gles.glsl", "paramsTypes": {}, "defaultParams": {}, "usage": 1 }, { "id": "62450e8bc274939c93e989a6", "type": "transition", "name": "Cube", "url": "https://res.miaotui.com/mtv/2022/03/31/09/41bd91bfbcca4a339da84d50491677c2/Cube_gles.glsl", "paramsTypes": {}, "defaultParams": {}, "usage": 1 }, { "id": "62450e8bc274939c93e989a7", "type": "transition", "name": "CurtainOpen Horizontal", "url": "https://res.miaotui.com/mtv/2022/03/31/09/dfa1d19ae365a37990d7204d08ab7b8d/CurtainOpen_Horizontal_gles.glsl", "paramsTypes": {}, "defaultParams": {}, "usage": 1 }] }, "composition": { "name": "输出", "direction": 0, "width": 1280, "height": 720, "layers": [{ "id": "layer-composition-1", "sourceId": "composition-1", "showRange": { "start": 0, "end": 26533 }, "clipRange": { "start": 0, "end": 0 }, "width": 100, "height": 100, "tag": "background" }, { "id": "layer-comp-main", "sourceId": "comp-main", "showRange": { "start": 0, "end": 26533 }, "clipRange": { "start": 0, "end": 0 }, "width": 1280, "height": 720, "tag": "main" }, { "id": "gen-1650282669689-99336", "sourceId": "gen-1650282669689-65303", "showRange": { "start": 0, "end": 26533 }, "clipRange": { "start": 0, "end": 0 }, "width": 1280, "height": 720, "tag": "audio" }, { "id": "gen-1650587191210-70844", "sourceId": "gen-1650587191210-65326", "showRange": { "start": 0, "end": 7400 }, "clipRange": { "start": 0, "end": 0 }, "width": 1280, "height": 720, "tag": "sub" }, { "id": "gen-1650595186364-47448", "sourceId": "gen-1650595186364-63976", "showRange": { "start": 0, "end": 18500 }, "clipRange": { "start": 0, "end": 0 }, "width": 1280, "height": 720, "tag": "sub" }], "duration": 26533 } }
const data = {
// 节点
nodes: [
{
id: 'configure', // String，可选，节点的唯一标识
x: 40, // Number，必选，节点位置的 x 值
y: 40, // Number，必选，节点位置的 y 值
width: 80, // Number，可选，节点大小的 width 值
height: 40, // Number，可选，节点大小的 height 值
label: 'configure', // String，节点标签
},
{
id: 'footage', // String，节点的唯一标识
x: 160, // Number，必选，节点位置的 x 值
y: 180, // Number，必选，节点位置的 y 值
width: 80, // Number，可选，节点大小的 width 值
height: 40, // Number，可选，节点大小的 height 值
label: 'footage', // String，节点标签
},
],
// 边
edges: [
{
source: 'configure', // String，必须，起始节点 id
target: 'footage', // String，必须，目标节点 id
},
],
};
data.nodes = []
data.edges = []
let i = 0
for (let footageType in source.footage) {
let j = 1
for (let item of source.footage[footageType]) {
data.nodes.push({
id: item.id,
x: 100 * j,
y: 100,
width: 100,
height: 40,
label: item.id
})
// data.edges.push({
// source: item.id,
// target: footageType
// })
j++
}
i++
}
const graph = new X6.Graph({
container: document.getElementById('container'),
width: 1280,
height: 720,
grid: {
size: 10, // 网格大小 10px
visible: true, // 渲染网格背景
},
});
graph.fromJSON(data)
<html>
<head>
<script src="https://unpkg.com/@antv/x6@1.1.1/dist/x6.js"></script>
</head>
<body>
<div id="container"></div>
</body>
</html>