echarts icon indicating copy to clipboard operation
echarts copied to clipboard

关系图布局方式使用'none',节点的x,y不是绝对位置

Open cdoneshot opened this issue 4 years ago • 8 comments

Version

4.7.0

Reproduction link

https://codepen.io/cdoneshot/pen/JjYPyxz

Steps to reproduce

  • 观察节点1的位置以及坐标:x=0,y=0,同时节点出现在左上角
  • 注释掉options里面data中的节点2、节点3、节点4
  • 观察节点1的位置以及坐标:x=0,y=0,同时节点出现在正中心

What is expected?

节点x,y不发生变化的情况下,始终根据某个坐标系固定位置,如左上角或正中心

What is actually happening?

在节点坐标不发生变化的情况下,随着data中节点的增加或者减少,节点的位置会发生变化


echarts目前这种方案可能有一些考虑,但在某些场景中,用户可能需要固定节点位置,而不是随着节点数量变化,节点位置也发生变化。同时,节点的位置一旦发生变化,节点到节点之间的边也在发生变化,导致边长始终不可控。

cdoneshot avatar Apr 08 '20 07:04 cdoneshot

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to [email protected]. Please attach the issue link if it's a technical questions.

If you are interested in the project, you may also subscribe our mail list.

Have a nice day! 🍵

echarts-bot[bot] avatar Apr 08 '20 07:04 echarts-bot[bot]

一个实际的使用场景

第一次通过位置计算,得到的图形如下

此时外圆半径R = r内圆半径,可以明显看到边缘节点的重叠很厉害,于是试图修改边缘节点的半径,来减轻重叠的情况 image

第二次通过位置计算,得到的图形如下

此时外圆半径R =4r 内圆半径。 image

两次计算中r始终没有发生变化,但是实际得到的图形中,内圆节点的位置明显发生了变化,导致整个图形看起来不是很合理。 在issues里面搜索了下相关问题,似乎很多人都询问过相同的问题,但是一直没有解答?

cdoneshot avatar Apr 08 '20 07:04 cdoneshot

另外,补充一下,使用layout:force,然后节点配置fixed也是一样的效果。

cdoneshot avatar Apr 08 '20 07:04 cdoneshot

请问这个问题解决了吗

qiuguixin avatar Aug 13 '21 19:08 qiuguixin

遇到同样的问题,有没有快速的解决办法?

MimeZoe0628 avatar Oct 27 '21 09:10 MimeZoe0628

我也有这个问题,既然我们选择了自定义x, y, 那为什么节点不按照xy编排呢?

liuzhaoxu1996 avatar Dec 20 '21 07:12 liuzhaoxu1996

目前仍然有这个问题,我最近的项目中需要在鼠标位置生成节点,但是由于是相对位置导致生成的位置总是有很大偏差。 我观察到当图中已经存在若干节点后再添加节点就可以让相对位置和鼠标位置相近。 我的解决方案是在初始化时隐式在图的四个角生成透明且无大小的节点,并且禁用关系图的缩放和移动。

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函数并且对坐标进行微调就可以使鼠标坐标和图中坐标一致 这种解决方案的缺点就是无法对图像进行缩放和移动。

XuanchenLi avatar Sep 11 '22 03:09 XuanchenLi

同问

candy4290 avatar May 14 '24 03:05 candy4290