[GitHub] [echarts] XuanchenLi commented on issue #12403: 关系图布局方式使用'none'，节点的x，y不是绝对位置

[GitBox <gi...@apache.org>]

XuanchenLi commented on issue #12403:
URL: https://github.com/apache/echarts/issues/12403#issuecomment-1242878691

   目前仍然有这个问题，我最近的项目中需要在鼠标位置生成节点，但是由于是相对位置导致生成的位置总是有很大偏差。
   但是我观察到当图中已经存在若干节点后再添加节点就可以让相对位置和鼠标位置相近。
   我的解决方案是在初始化时隐式在图的四个角生成透明且无大小的节点，并且禁用关系图的缩放和移动。
   `stake: GraphNodeItemOption[] = [
       {
         name: '__stake1',
         x: 0,
         y: 0,
         symbolSize: 0,
         label: {
           show: false
         }
   
       },
       {
         name: '__stake2',
         x: 800,
         y: 0,
         symbolSize: 0,
         label: {
           show: false
         }
       },
       {
         name: '__stake3',
         x: 0,
         y: 600,
         symbolSize: 0,
         label: {
           show: false
         }
       },
       {
         name: '__stake4',
         x: 800,
         y: 600,
         symbolSize: 0,
         label: {
           show: false
         }
       }
     ]`
   
   这样就可以时后续添加的节点相对位置稳定。
   `let x = e.clientX;
       let y = e.clientY;
       this.left = x
       this.top = y
       let result = this.graph.convertFromPixel({
         seriesIndex:0,
         xAxisIndex:0
       },[x,y]);
       this.gleft = parseInt(result[0])
       this.gtop = parseInt(result[1]) - 30  // 微调`
   使用convertFromPixel函数并且对坐标进行微调就可以使鼠标坐标和图中坐标一致
   这种解决方案的缺点就是无法对图像进行缩放和移动。


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