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 2021/12/24 08:43:37 UTC

[GitHub] [echarts] liucys opened a new issue #16279: [Bug] 关系图力导向设置edgeLength无效

liucys opened a new issue #16279:
URL: https://github.com/apache/echarts/issues/16279


   ### Version
   
   5.2.2
   
   ### Link to Minimal Reproduction
   
   _No response_
   
   ### Steps to Reproduce
   
   相关实现代码:
   ```js
   const img6 = `image://data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU3IiBoZWlnaHQ9IjI1NyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIj4KIDxkZWZzPgogIDxsaW5lYXJHcmFkaWVudCBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeTI9IjEwMCUiIHgyPSIxMDAlIiB5MT0iMCUiIHgxPSIwJSIgaWQ9InN2Z18yIj4KICAgPHN0b3Agc3RvcC1jb2xvcj0iI0UzMjNGRiIvPgogICA8c3RvcCBzdG9wLWNvbG9yPSIjNzUxN0Y4IiBvZmZzZXQ9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxsaW5lYXJHcmFkaWVudCBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLDEsNDQuOTkzMjAyMjA5NDcyNjU2LDQ0LjYyNzU5NzgwODgzNzg5KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHkyPSI0Mi4zMzU2IiB4Mj0iNC40MDM4NSIgeTE9IjQyLjE5NyIgeDE9IjE2Ni43NjEiIGlkPSJzdmdfNCI+CiAgIDxzdG9wIHN0b3AtY29sb3I9IiNFMzIzRkYiLz4KICAgPHN0b3Agc3RvcC1jb2xvcj0iIzc1MTdGOCIgb2Zmc2V0PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8bGluZWFyR3JhZGllbnQgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLDQ0Ljk5MzIwMjIwOTQ3MjY1Niw0NC42Mjc1OTc4MDg4Mzc4OSkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB5Mj0iNDkuNjExNCIgeDI9IjIxLjM0MDYiIHkxPSI
 0OS40OTk3IiB4MT0iMTUyIiBpZD0ic3ZnXzMiPgogICA8c3RvcCBzdG9wLWNvbG9yPSIjRTMyM0ZGIi8+CiAgIDxzdG9wIHN0b3AtY29sb3I9IiM3NTE3RjgiIG9mZnNldD0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiA8L2RlZnM+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPGc+CiAgIDxjaXJjbGUgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxNSIgc3Ryb2tlLWRhc2hhcnJheT0iMSwyMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwMCIgc3Ryb2tlPSJ1cmwoI3N2Z18yKSIgcj0iMTEwIiBjeT0iMTI4LjUiIGN4PSIxMjguNSIvPgoKICA8L2c+CiAgPGc+CiAgIDxlbGxpcHNlIHRyYW5zZm9ybT0icm90YXRlKC05MCAxMjguNSAxMjguNSkiIGZpbGw9InVybCgjc3ZnXzQpIiByeT0iODMuMzQ5OSIgcng9IjgzLjI1MzkiIGN5PSIxMjguNSIgY3g9IjEyOC41IiBvcGFjaXR5PSIwLjI1Ii8+CiAgIDxjaXJjbGUgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDEyOS45OTMgMTI3LjYyOCkiIGZpbGw9InVybCgjc3ZnXzMpIiByPSI2NyIgY3k9IjEyNy42Mjc2IiBjeD0iMTI5Ljk5MzIiLz4KICAgPGVsbGlwc2UgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDEzMC45OTMgMTI3LjYyOCkiIGZpbGw9IiMxOTE5MzIiIHJ5PSI1OCIgcng9IjU4IiBjeT0iMTI3LjYyNzYiIGN4PSIxMzAuOTkzMiIvPgoKICA8L2c+CiA8L2c+Cjwvc3ZnPg==`;
   const img4 = `image://data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NSIgdmlld0JveD0iMCAwIDI1NiAyNTUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogICAgPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjBfZGlpXzczXzEwODUpIj4NCiAgICAgICAgPGVsbGlwc2UgY3g9IjEyOCIgY3k9IjEyMy4xMjQiIHJ4PSI1MCIgcnk9IjQ5LjEyMzciIGZpbGw9IiMwMzAwOTIiIC8+DQogICAgICAgIDxlbGxpcHNlIGN4PSIxMjgiIGN5PSIxMjMuMTI0IiByeD0iNTAiIHJ5PSI0OS4xMjM3IiBmaWxsPSJ1cmwoI3BhaW50MF9yYWRpYWxfNzNfMTA4NSkiIC8+DQogICAgPC9nPg0KICAgIDxkZWZzPg0KICAgICAgICA8ZmlsdGVyIGlkPSJmaWx0ZXIwX2RpaV83M18xMDg1IiB4PSIwLjEwODQ0NCIgeT0iMC4wMDMwMjE5NiIgd2lkdGg9IjI1NS43ODMiIGhlaWdodD0iMjU0LjAzIiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+DQogICAgICAgICAgICA8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIgLz4NCiAgICAgICAgICAgIDxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIiByZXN1bHQ9ImhhcmRBbHBoYSI
 gLz4NCiAgICAgICAgICAgIDxmZU9mZnNldCBkeT0iMy44OTQ1OCIgLz4NCiAgICAgICAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjM4Ljk0NTgiIC8+DQogICAgICAgICAgICA8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwLjEzNTkxNyAwIDAgMCAwIDAgMCAwIDAgMCAwLjk3MDgzMyAwIDAgMCAxIDAiIC8+DQogICAgICAgICAgICA8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9ImVmZmVjdDFfZHJvcFNoYWRvd183M18xMDg1IiAvPg0KICAgICAgICAgICAgPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3dfNzNfMTA4NSIgcmVzdWx0PSJzaGFwZSIgLz4NCiAgICAgICAgICAgIDxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIiByZXN1bHQ9ImhhcmRBbHBoYSIgLz4NCiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iOS43MzY0NCIgZHk9IjE1LjU3ODMiIC8+DQogICAgICAgICAgICA8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI5LjczNjQ0IiAvPg0KICAgICAgICAgICAgPGZlQ29tcG9zaXRlIGluMj0iaGFyZEFscGhhIiBvcGVyYXRvcj0iYXJpdGhtZXRpYyIgazI9Ii0xIiBrMz0iMSIgLz4NCiAgICAgICAgICAgIDxm
 ZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAuNTEwNDE3IDAgMCAwIDAgMC4wMjA4MzMzIDAgMCAwIDAgMSAwIDAgMCAwLjk1IDAiIC8+DQogICAgICAgICAgICA8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluMj0ic2hhcGUiIHJlc3VsdD0iZWZmZWN0Ml9pbm5lclNoYWRvd183M18xMDg1IiAvPg0KICAgICAgICAgICAgPGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMTI3IDAiIHJlc3VsdD0iaGFyZEFscGhhIiAvPg0KICAgICAgICAgICAgPGZlT2Zmc2V0IGR5PSIxLjk0NzI5IiAvPg0KICAgICAgICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNC44NjgyMiIgLz4NCiAgICAgICAgICAgIDxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9ImFyaXRobWV0aWMiIGsyPSItMSIgazM9IjEiIC8+DQogICAgICAgICAgICA8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAxIDAgMCAwIDAgMSAwIDAgMCAwIDEgMCAwIDAgMC41OCAwIiAvPg0KICAgICAgICAgICAgPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbjI9ImVmZmVjdDJfaW5uZXJTaGFkb3dfNzNfMTA4NSIgcmVzdWx0PSJlZmZlY3QzX2lubmVyU2hhZG93XzczXzEwODUiIC8+DQogICAgICAgIDwvZmlsdGVyPg0KICAgICAgICA8cmFkaWFsR3JhZGllbnQgaWQ9I
 nBhaW50MF9yYWRpYWxfNzNfMTA4NSIgY3g9IjAiIGN5PSIwIiByPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSgxNDguNCAxMDQuNjUzKSByb3RhdGUoMTExLjMxNCkgc2NhbGUoMTAxLjI0MiAxMDIuNTc1KSI+DQogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjMzI0NEU4IiAvPg0KICAgICAgICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMDAwMjEwIiBzdG9wLW9wYWNpdHk9IjAiIC8+DQogICAgICAgIDwvcmFkaWFsR3JhZGllbnQ+DQogICAgPC9kZWZzPg0KPC9zdmc+`;
   
   const list = [
     {
       name: '资金关系',
       value: 65475,
       unit: '万'
     },
     {
       name: 'A',
       value: 128,
       unit: ''
     },
     {
       name: 'B',
       value: 287,
       unit: ''
     },
     {
       name: 'C',
       value: 372,
       unit: ''
     },
     {
       name: 'D',
       value: 472,
       unit: ''
     },
     {
       name: 'E',
       value: 572,
       unit: ''
     },
     {
       name: 'F',
       value: 672,
       unit: ''
     },
     {
       name: 'G',
       value: 772,
       unit: ''
     },
     {
       name: 'H',
       value: 872,
       unit: ''
     },
     {
       name: 'I',
       value: 972,
       unit: ''
     }
   ];
   const links = list.map((item) => {
     return {
       source: '资金关系',
       target: item.name
     };
   });
   
   const data = list.map((item, index) => {
     let size = Number(item.value);
     if (item.unit) {
       size = 220;
     } else {
       size = 200;
     }
     let img = '';
     let label = {};
     if (index === 0) {
       img = img6;
       label = {
         normal: {
           show: true,
           fontSize: 14,
           color: '#fff',
           align: 'center',
           textShadowColor: '#18cdfe',
           textShadowBlur: 10,
           formatter: (params) => {
             return `${params.data.name} \n\n ${params.data.value} ${params.data.unit}`;
           },
           rich: {
             name: {
               fontSize: 18,
               textBorderColor: '#8CCBFF',
               textBorderWidth: 2,
               lineHeight: 24,
               textShadowColor: '#18cdfe'
             }
           }
         }
       };
     } else {
       img = img4;
       label = {
         normal: {
           show: true,
           fontSize: 10,
           color: '#fff',
           textShadowColor: '#18cdfe',
           textShadowBlur: 10,
           formatter: (params) => {
             return `${params.data.name}\n\n ¥${params.data.value} ${params.data.unit}`;
           },
           rich: {
             number: {
               fontSize: 10,
               fontWeight: 'bold',
               align: 'center'
             },
             unit: {
               fontSize: 10,
               align: 'center'
             },
             name: {
               fontSize: 10,
               lineHeight: 20,
               align: 'center',
               textBorderColor: '#8CCBFF',
               textBorderWidth: 1
             }
           }
         }
       };
     }
     return {
       name: item.name,
       value: item.value,
       unit: item.unit,
       symbol: img,
       symbolSize: size,
       draggable: false,
       category: 1,
       label
     };
   });
   
   option = {
     tooltip: {},
     animationDurationUpdate: 2000, // 数据更新动画时长
     animationEasingUpdate: 'quinticInOut', // 数据更新动画缓动效果
     series: [
       {
         type: 'graph',
         layout: 'force',
         force: {
           repulsion: [2000, 100],
           // edgeLength: [10, 50] 值最大的边长度会趋向于 10,值最小的边长度会趋向于 50
           edgeLength: [200, 10]
         },
         zoom: 0.6, // 缩放
         roam: 'scale', // 是否开启鼠标缩放和平移漫游
         data, // 关系节点数据列表,节点的name属性不能重复
         links, // 节点间的关系数据
         lineStyle: {
           // 关系边的公用线条样式
           normal: {
             opacity: 0.9, // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
             width: 3, // 线宽
             curveness: 0, // 边的曲度,支持从 0 到 1 的值,值越大曲度越大
             color: {
               type: 'linear',
               x: 0,
               y: 0,
               x2: 0,
               y2: 1,
               colorStops: [
                 {
                   offset: 0,
                   color: '#CE1FFC' // 0% 处的颜色
                 },
                 {
                   offset: 1,
                   color: '#0B0D82' // 100% 处的颜色
                 }
               ],
               globalCoord: false // 缺省为 false
             }
           }
         }
       }
     ]
   };
   ```
   
   ### Current Behavior
   
   根据官方文档力导图配置无效
   ```js
   layout: 'force',
   force: {
      repulsion: [2000, 100],
      // edgeLength: [10, 50] 值最大的边长度会趋向于 10,值最小的边长度会趋向于 50
      edgeLength: [200, 10]
   },
   ```
   
   ### Expected Behavior
   
   希望根据list变量中的`value`属性值越大,则节点边的长度就越长
   ```js
   const list = [
     {
       name: '资金关系',
       value: 65475,
       unit: '万'
     },
     {
       name: 'A',
       value: 128,
       unit: ''
     },
     {
       name: 'B',
       value: 287,
       unit: ''
     },
     {
       name: 'C',
       value: 372,
       unit: ''
     },
     {
       name: 'D',
       value: 472,
       unit: ''
     },
     {
       name: 'E',
       value: 572,
       unit: ''
     },
     {
       name: 'F',
       value: 672,
       unit: ''
     },
     {
       name: 'G',
       value: 772,
       unit: ''
     },
     {
       name: 'H',
       value: 872,
       unit: ''
     },
     {
       name: 'I',
       value: 972,
       unit: ''
     }
   ];
   ```
   
   ### Environment
   
   ```markdown
   - OS:window
   - Browser: Chrome 96.0.4664.55
   - Framework: ant design pro
   ```
   
   
   ### Any additional comments?
   
   默认设置是相等的长度,根据官方文档配置后效果不正确


-- 
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.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

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] [echarts] liucys edited a comment on issue #16279: [Bug] 关系图力导向设置edgeLength无效

Posted by GitBox <gi...@apache.org>.
liucys edited a comment on issue #16279:
URL: https://github.com/apache/echarts/issues/16279#issuecomment-1001118102


   The problem has been solved and it looks like there was a wash-in problem with other configurations.
    1.  the value attribute of the links needs to be configured.
    2.  after setting layout to force, the repulsion property cannot be set as an array in the configuration of force.
   
   ```js
   // first 
   let links = list.map((item) => {
         if (item.name !== '资金关系') {
           return {
             source: '资金关系',
             target: item.name,
             value: item.value, // add this
           };
         }
     return null;
   });
   
   links = links.filter((item) => item);
   
   // next
   series: [
       {
         type: 'graph',
         layout: 'force',
         force: {
           // edgeLength: [10, 50] 值最大的边长度会趋向于 10,值最小的边长度会趋向于 50
           repulsion: 2000,  // cannot set arrays
           edgeLength: [400, 50]
         },
   ]
   ```


-- 
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.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

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] [echarts] SnailSword edited a comment on issue #16279: [Bug] 关系图力导向设置edgeLength无效

Posted by GitBox <gi...@apache.org>.
SnailSword edited a comment on issue #16279:
URL: https://github.com/apache/echarts/issues/16279#issuecomment-1001106632


   1. After Setting `edgeLength`, The length of each edge is based on value of `links.value`, not node‘s value.
   2. There is a dirty data in your `links`.
   
   
   ```
   const links = list.map((item) => {
     return {
       source: '资金关系',
       target: item.name,
       value: item.value // 1. add this
     };
   });
   
   links.shift(); // 2. add this
   ```
   
   
   1.  设置`edgeLength`之后,边的长度是基于`links`的值计算的,而不是节点的值
   2.  你的`links`里面有个脏数据,需要去掉'资金关系'指向'资金关系'这一项


-- 
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.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

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] [echarts] echarts-bot[bot] commented on issue #16279: [Bug] 关系图力导向设置edgeLength无效

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


   @liucys It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗
   <details><summary><b>TRANSLATED</b></summary><br>
   
   **TITLE**
   
   [Bug] The graph force guide setting edgeLength is invalid
   </details>


-- 
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.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

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] [echarts] SnailSword edited a comment on issue #16279: [Bug] 关系图力导向设置edgeLength无效

Posted by GitBox <gi...@apache.org>.
SnailSword edited a comment on issue #16279:
URL: https://github.com/apache/echarts/issues/16279#issuecomment-1001106632


   1. After Setting `edgeLength`, The length of each edge is based on value of `links.value`, not node‘s value.
   2. There is a dirty data in your `links`.
   
   1.  设置`edgeLength`之后,边的长度是基于`links`的值计算的,而不是节点的值
   2.  你的`links`里面有个脏数据,需要去掉'资金关系'指向'资金关系'这一项
   
   ```
   const links = list.map((item) => {
     return {
       source: '资金关系',
       target: item.name,
       value: item.value // 1. add this
     };
   });
   
   links.shift(); // 2. add this
   ```


-- 
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.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

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] [echarts] SnailSword commented on issue #16279: [Bug] 关系图力导向设置edgeLength无效

Posted by GitBox <gi...@apache.org>.
SnailSword commented on issue #16279:
URL: https://github.com/apache/echarts/issues/16279#issuecomment-1001106632


   1. After Setting `edgeLength`, The length of each edge is based on value of `links.value`, not node‘s value.
   2. There is a dirty data in your `links`.
   
   ```
   const links = list.map((item) => {
     return {
       source: '资金关系',
       target: item.name,
       value: item.value // 1. add this
     };
   });
   
   links.shift(); // 2. add this
   ```


-- 
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.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

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] [echarts] liucys commented on issue #16279: [Bug] 关系图力导向设置edgeLength无效

Posted by GitBox <gi...@apache.org>.
liucys commented on issue #16279:
URL: https://github.com/apache/echarts/issues/16279#issuecomment-1001118102


   The problem has been solved and it looks like there was a wash-in problem with other configurations.
    1.  the value attribute of the links needs to be configured.
    2.  after setting layout to force, the repulsion property cannot be set as an array in the configuration of force.
   
   ```js
   // first 
   let links = list.map((item) => {
         if (item.name !== '中轻集团') {
           return {
             source: '中轻集团',
             target: item.name,
             value: item.value, // add this
           };
         }
     return null;
   });
   
   links = links.filter((item) => item);
   
   // next
   series: [
       {
         type: 'graph',
         layout: 'force',
         force: {
           // edgeLength: [10, 50] 值最大的边长度会趋向于 10,值最小的边长度会趋向于 50
           repulsion: 2000,  // cannot set arrays
           edgeLength: [400, 50]
         },
   ]
   ```


-- 
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.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

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] [echarts] liucys commented on issue #16279: [Bug] 关系图力导向设置edgeLength无效

Posted by GitBox <gi...@apache.org>.
liucys commented on issue #16279:
URL: https://github.com/apache/echarts/issues/16279#issuecomment-1001107684


   @SnailSword Thanks for the reply, but this doesn't seem to work and for some values of edge distance it doesn't work as well as I would expect. It doesn't have the effect that the larger the value the longer the edge length.


-- 
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.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

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] [echarts] SnailSword edited a comment on issue #16279: [Bug] 关系图力导向设置edgeLength无效

Posted by GitBox <gi...@apache.org>.
SnailSword edited a comment on issue #16279:
URL: https://github.com/apache/echarts/issues/16279#issuecomment-1001106632


   1. After Setting `edgeLength`, The length of each edge is based on value of `links.value`, not node‘s value.
   2. There is a dirty data in your `links`.
   
   
   
   1.  设置`edgeLength`之后,边的长度是基于`links`的值计算的,而不是节点的值
   2.  你的`links`里面有个脏数据,需要去掉'资金关系'指向'资金关系'这一项
   
   ```
   const links = list.map((item) => {
     return {
       source: '资金关系',
       target: item.name,
       value: item.value // 1. add this
     };
   });
   
   links.shift(); // 2. add this
   ```


-- 
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.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

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] [echarts] liucys closed issue #16279: [Bug] 关系图力导向设置edgeLength无效

Posted by GitBox <gi...@apache.org>.
liucys closed issue #16279:
URL: https://github.com/apache/echarts/issues/16279


   


-- 
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.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

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