ayashjorden opened a new issue #13032:
URL: https://github.com/apache/incubator-echarts/issues/13032
Version
4.8.0
Steps to reproduce
Create a Graph-Force chart with two Series
Create a link between series-1-node-1 to series-2-node-1
Render the chart
There's no link between the nodes.
What is expected?
Should be able to linked nodes between two series
What is actually happening?
Cannot reference nodes between two series.
Opened a StackOverflow question here -
https://stackoverflow.com/questions/62889878/echarts-nested-directed-graph
Example config:
```ts
generateDag() {
this.testDag = echarts.init(document.getElementById(`dag`) as
HTMLDivElement);
const chartWidth = this.testDag.getWidth();
const nodes1 = [
{ name: 'AUDIT.n1', value: 10 },
{ name: 'AUDIT.n2', value: 10 },
{ name: 'AUDIT.n3', value: 10 },
];
const links1 = [
{ source: 0, target: 1, value: 10 },
{ source: 'AUDIT.n2', target: 'AUDIT.n3', value: 10 },
{ source: 'AUDIT.n2', target: 'DEPLOYMENT.n3', value: 10 }
];
const nodes2 = [
{ name: 'DEPLOYMENT.n1', value: 10 },
{ name: 'DEPLOYMENT.n2', value: 10 },
{ name: 'DEPLOYMENT.n3', value: 10 },
];
const links2 = [
{ source: 'DEPLOYMENT.n1', target: 'DEPLOYMENT.n2', value: 10 },
{ source: 'DEPLOYMENT.n2', target: 'DEPLOYMENT.n3', value: 10 }
];
const minNodeSize = 15;
const maxNodeSize = 75;
const nodeSize = (chartWidth - 15) / ((nodes1.length + nodes2.length) *
10);
const edgeLength = nodeSize < minNodeSize ? 25 : nodeSize * 3;
const repulsion = nodeSize < minNodeSize ? 25 : nodeSize * 10;
const gravity = nodeSize < minNodeSize ? 0.3 : 0.2;
let symbolSize: number;
if (nodeSize <= minNodeSize) {
symbolSize = minNodeSize;
} else if (nodeSize > minNodeSize && nodeSize <= maxNodeSize) {
symbolSize = nodeSize;
} else {
symbolSize = maxNodeSize;
}
console.log(
'chartWidth', chartWidth,
'nodes1.length', nodes1.length,
'nodeSize', nodeSize,
'edgeLength', edgeLength,
'repultion', repulsion,
'symbolSize', symbolSize,
'gravity', gravity
);
const options = {
tooltip: {},
animation: false,
title: {
text: 'test view',
subtext: 'Default layout',
top: 'bottom',
left: 'right'
},
animationDuration: 1500,
animationEasingUpdate: 'quinticInOut',
series: [{
name: 'CREATE',
id: 'CREATE',
symbolSize,
type: 'graph',
layout: 'force',
force: {
edgeLength,
repulsion,
gravity
},
data: nodes1,
links: links1,
// categories: categories,
roam: 'move',
draggable: true,
focusNodeAdjacency: true,
symbolKeepAspect: true,
itemStyle: {
borderColor: '#fff',
borderWidth: 1,
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.3)'
},
label: {
position: 'right',
formatter: '{b}'
},
lineStyle: {
color: 'source',
curveness: 0.3
},
emphasis: {
lineStyle: {
width: 10
}
}
},
{
name: 'DEPLOYMENT',
id: 'DEPLOYMENT',
symbolSize,
type: 'graph',
layout: 'force',
force: {
edgeLength,
repulsion,
gravity
},
data: nodes2,
links: links2,
// categories: categories,
roam: 'move',
draggable: true,
focusNodeAdjacency: true,
symbolKeepAspect: true,
itemStyle: {
borderColor: '#fff',
borderWidth: 1,
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.3)'
},
label: {
position: 'right',
formatter: '{b}'
},
lineStyle: {
color: 'source',
curveness: 0.3
},
emphasis: {
lineStyle: {
width: 10
}
}
}
]
};
this.testDag.setOption(options);
this.testDag.resize();
}
```
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
