purpose: to give the json data of nodes and connections, and draw a flow graph with vue. The flow graph in the artboard is composed of several directed graphs , the artboard in the flow graph is required to be scaled , the node size can be set , the coordinates can be obtained , the can fill the picture , the label information can be displayed in the below, and the node and connection are all monitored by events , the node can be moved, and the connection position is updated < / strong. The most important thing is that the artboard can be automatically laid out .
vue+svgWebGraphviz
above shows myself trying to implement it with WebGraphviz, but node size and image filling fail to achieve . In addition, things in svg are rendered through js. Although you can listen for events and obtain coordinate locations by acquiring dom nodes, it is difficult to manipulate the data and status of dom directly.
json data structure is as follows
{
"nodes":{
"node1":{
"id": "node1",
"imgSrc": "img1",
"label": "1",
"width": "50",
"height": "50",
},
"node2":{
"id": "node2",
"imgSrc": "img2",
"label": "2",
"width": "50",
"height": "50",
},
"node2":{
"id": "node2",
"imgSrc": "img1",
"label": "2",
"width": "50",
"height": "50",
}
},
"lines":[
["node1","node2"] //node1->node2
]
}
the current problem requires a automatic layout algorithm + connection path algorithm (as long as the node coordinate information is provided), or use WebGraphviz as a template to modify to improve the function.
I have checked a lot of information, but I have no clue all the time. I hope the old driver passing by can give me some advice