How to use ECharts to manipulate nodes in a relationship graph? - echarts

Question

I wish to use ECharts to implement a page. In this page, the user can use some buttons to add a node(or edge) or edit the name of a node(or edge). So I want to manipulate the nodes of a relation graph such as the force layout which is shown here:
https://echarts.apache.org/examples/en/editor.html?c=graph-force
Now my question is, since the data of the graph in the example is provided by a gexf file, is there any way to control them from javascript? Like adding a node, deleting a node, or editing a node(or edge).

Answer 1

The data used in the example is in XML format which is later converted to an array of objects, you can look at that format and generate your own using javascript. For instance,
var nodes = [
{
id: "0",
name: "",
itemStyle: null,
symbolSize: 50,
attributes: {
modularity_class: 0
},
value: 28.685715,
label: {
show: false
},
category: 0
},
{
id: "1",
name: "",
itemStyle: null,
symbolSize: 10,
attributes: {
modularity_class: 0
},
value: 4,
label: {
show: false
},
category: 0
},
{
id: "2",
name: "",
itemStyle: null,
symbolSize: 10,
attributes: {
modularity_class: 0
},
value: 9.485714,
label: {
show: false
},
category: 0
}];
var links = [
{
id: "0",
name: null,
source: "0",
target: "1",
lineStyle: {
normal: {}
}
},
{
id: "1",
name: null,
source: "0",
target: "2",
lineStyle: {
normal: {}
}];