关系图拖动改变节点位置,其它节点位置不要变化
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 15h 17m
- Merged PRs (30d)
- 5
Description
### What problem does this feature solve?
我想用echarts关系图实现流程图设计,希望其它节点不要动,而且我想知道鼠标位置和关系图节点坐标怎么对应的,初始化的position对不上,下面这个是官网simple Graph实现的样例
```
let data = [{
name: '节点1',
x: 100,
y: 100
}, {
name: '节点2',
x: 800,
y: 300
},
{
name: '节点3',
x: 500,
y: 100
}];
option = {
title: {
text: 'Graph 简单示例'
},
tooltip: {},
animation:false,
series: [
{
type: 'graph',
layout: 'none',
symbolSize: 20,
roam: false,
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
fontSize: 20
},
data: data,
// links: [],
links: [{
source: 0,
target: 1,
// symbolSize: [5, 20],
// label: {
// show: true
// }
}, {
source: '节点2',
target: '节点1',
label: {
show: true
}
}, {
source: '节点1',
target: '节点3'
}, {
source: '节点2',
target: '节点3'
}, {
source: '节点2',
target: '节点4'
}, {
source: '节点1',
target: '节点4'
}],
lineStyle: {
opacity: 0.9,
width: 1,
curveness: 0
}
}
]
};
setTimeout(function () {
// Add shadow circles (which is not visible) to enable drag.
myChart.setOption({
graphic: data.map(function (item, dataIndex) {
return {
type: 'circle',
position: myChart.convertFromPixel({seriesIndex: 0},[item.x,item.y]),
shape: {
cx: 0,
cy: 0,
r: 10
},
invisible: false,
draggable: true,
ondrag: function (dx, dy) {
let index = data.findIndex((dataItem)=>{
return dataItem.name == item.name
})
let convertPos = myChart.convertFromPixel({seriesIndex: 0},[this.x,this.y])
data[index].x = convertPos[0];
data[index].y = convertPos[1];
console.log(data[index])
myChart.setOption(option)
},
onmousemove: function () {
},
onmouseout: function () {
},
z: 100
};
})
});
}, 0);
```
### What does the proposed API look like?
和原来一样
Contributor guide
Research direction
Start with the provided ECharts graph-series example, especially layout: 'none', the graphic overlays, convertFromPixel, and the ondrag handler. Reproduce the behavior and determine how dragging one node should preserve the positions of the others and map mouse coordinates to node coordinates. Done means the requested interaction and coordinate mapping are clearly defined and work without moving unrelated nodes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100