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