You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2020/07/29 07:33:45 UTC

[GitHub] [incubator-echarts] ayashjorden opened a new issue #13032: Create a link between two series

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:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [incubator-echarts] susiwen8 closed issue #13032: Create a link between two series

Posted by GitBox <gi...@apache.org>.
susiwen8 closed issue #13032:
URL: https://github.com/apache/incubator-echarts/issues/13032


   


----------------------------------------------------------------
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:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [incubator-echarts] echarts-bot[bot] commented on issue #13032: Create a link between two series

Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #13032:
URL: https://github.com/apache/incubator-echarts/issues/13032#issuecomment-664786548


   This issue is not created using [issue template](https://ecomfe.github.io/echarts-issue-helper/) so I'm going to close it. 🙊
   Sorry for this, but it helps save our maintainers' time so that more developers get helped.
   Feel free to create another issue using the issue template.
   
   If you think you have already made your point clear without the template, or your problem cannot be covered by it, you may re-open this issue again.
   
   这个 issue 未使用 [issue 模板](https://ecomfe.github.io/echarts-issue-helper/?lang=zh-cn) 创建,所以我将关闭此 issue。
   为此带来的麻烦我深表歉意,但是请理解这是为了节约社区维护者的时间,以更高效地服务社区的开发者群体。
   如果您愿意,可以请使用 issue 模板重新创建 issue。
   
   如果你认为虽然没有使用模板,但你已经提供了复现问题的充分描述,或者你的问题无法使用模板表达,也可以重新 open 这个 issue。


----------------------------------------------------------------
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:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org