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 2022/07/11 09:19:01 UTC
[GitHub] [echarts] Josiahhx opened a new issue, #17348: [Bug] echarts关系图的力引导图，创建或删除导致的节点id不连续，造成节点间连线出错，或不能连线
Josiahhx opened a new issue, #17348:
URL: https://github.com/apache/echarts/issues/17348
### Version
5.3.3
### Link to Minimal Reproduction
_No response_
### Steps to Reproduce
**1. create chart**
` <div ref="chart" class="chartEntityShow" v-show="chartEntityVisible"></div>`
vue
```
if (this.chart === null) {
this.chart = echarts.init(this.$refs.chart)
}
```
**2. option**
```
let option = {
//图例位置
legend: [{
x: 'left',//图例位置
data: ['创新实体', '属性值']//关系图中需要与series中的categories的name保持一致
}],
//提示框
tooltip: {
confine: true,
formatter: function (x) {
let result = ''
if (x.data.des !== undefined) {
if (x.data.des.length >= 4) {//换行显示
// result = `<div style="display:block;max-width: 400px;word-break: break-all;word-wrap: break-word;white-space:pre-wrap">${x.data.des}</div>`
}
}
return result//设置提示框的内容和格式 节点和边都显示des属性
},
},
series: [{
type: 'graph', // 类型:关系图
layout: 'force', //图的布局，类型为力导图
symbolSize: 40, // 调整节点的大小
roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [2, 10],
//箭头标签
edgeLabel: {
show: true,
formatter: function (x) {
return x.data.name;
}
},
force: { //力场之间的影响因子
repulsion: 300,
gravity: 0.1,
friction: 0.6,
edgeLength: 200,
layoutAnimation: true,
},
//拖拽
// draggable: true,
// dataRange:{
// itemGap: 30
// },
lineStyle: {
width: 2,
color: '#4b565b',
curveness: 0.3
},
label: {
show: true,
textStyle: {}
},
//聚焦显示
emphasis: {
focus: 'adjacency',
lineStyle: {
width: 10
}
},
data: newChartData,
links: newChartLink,
categories: [
{
name: '创新实体'
},
{
name: '属性值'
}]
}]
}
this.chart.setOption(option, true)
```
3. problem
只有当我删除或新增节点时这样使id连续才能将新增节点进行连线，否则不能。
例如目前有节点id 0~5，添加新节点id为999时，不能将节点id0和999连线，还会可能出现乱连线的错误。
当我新增节点id为6时，可以正常连线。
删除节点也同理
下面是我能正常常增加节点或删除节点的简单操作
```
test() {
let option = this.chart.getOption()
//增加节点START
// option.series[0].data.push({name: '测试节点', category: 1, id: 6, des: '测试描述'})
// option.series[0].links.push({source: 0, target: 6, name: '测试连线'})
//增加节点END
//删除节点START
let data = option.series[0].data
let link = option.series[0].links
let flag = -1
for(let i = 0; i<data.length;i++){
if (data[i].id===1){
data.splice(i,1)
link.splice(i-1,1)
flag = i
}
}
for(let i = flag; i<data.length;i++){
data[i].id--
if (i!==data.length){
link[i-1].target--
}
}
this.chart.setOption(option)
//删除节点END
}
```
### Current Behavior
不能正常增删节点连线
### Expected Behavior
不用使节点id连续，就能正常进行增删节点。
### Environment
```markdown
- OS:windows11
- Browser:edge
- Framework:vue@2
```
### Any additional comments?
_No response_
--
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.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 #17348: [Bug] echarts关系图的力引导图，创建或删除导致的节点id不连续，造成节点间连线出错，或不能连线
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #17348:
URL: https://github.com/apache/echarts/issues/17348#issuecomment-1180162000
@Josiahhx 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 force guidance diagram of the echarts diagram, the creation or deletion of the node id is not continuous, resulting in an error in the connection between the nodes, or the inability to connect
**BODY**
### Version
5.3.3
### Link to Minimal Reproduction
_No response_
### Steps to Reproduce
**1. create chart**
` <div ref="chart" class="chartEntityShow" v-show="chartEntityVisible"></div>`
vue
````
if (this.chart === null) {
this.chart = echarts.init(this.$refs.chart)
}
````
**2. options**
````
let option = {
// legend position
legend: [{
x: 'left',//Legend position
data: ['innovation entity', 'attribute value']//The relationship diagram needs to be consistent with the name of the categories in the series
}],
// prompt box
tooltip: {
confine: true,
formatter: function (x) {
let result = ''
if (x.data.des !== undefined) {
if (x.data.des.length >= 4) {//Newline display
// result = `<div style="display:block;max-width: 400px;word-break: break-all;word-wrap: break-word;white-space:pre-wrap">${x.data .des}</div>`
}
}
return result//Set the content and format of the prompt box. Both nodes and edges display the des attribute
},
},
series: [{
type: 'graph', // type: graph
layout: 'force', //The layout of the graph, the type is force map
symbolSize: 40, // resize the node
roam: true, // Whether to enable mouse zoom and pan roaming. Not enabled by default. If you only want to enable zoom or pan, you can set it to 'scale' or 'move'. Set to true to enable both
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [2, 10],
//arrow label
edgeLabel: {
show: true,
formatter: function (x) {
return x.data.name;
}
},
force: { //Influence factor between force fields
repulsion: 300,
gravity: 0.1,
friction: 0.6,
edgeLength: 200,
layoutAnimation: true,
},
//drag
// draggable: true,
// dataRange:{
// itemGap: 30
// },
lineStyle: {
width: 2,
color: '#4b565b',
curveness: 0.3
},
label: {
show: true,
textStyle: {}
},
// focus display
emphasis: {
focus: 'adjacency',
lineStyle: {
width: 10
}
},
data: newChartData,
links: newChartLink,
categories: [
{
name: 'Innovation Entity'
},
{
name: 'Attribute value'
}]
}]
}
this.chart.setOption(option, true)
````
3. problem
Only when I delete or add nodes can I connect the new nodes by making the id continuous, otherwise I can't.
For example, there are currently node id 0~5, when adding a new node id 999, the node id 0 and 999 cannot be connected, and there may be a random connection error.
When I add a new node with an id of 6, I can connect normally.
The same is true for deleting nodes
Below is the simple operation that I can normally add nodes or delete nodes
````
test() {
let option = this.chart.getOption()
//Add node START
// option.series[0].data.push({name: 'test node', category: 1, id: 6, des: 'test description'})
// option.series[0].links.push({source: 0, target: 6, name: 'Test connection'})
//Add node END
// delete node START
let data = option.series[0].data
let link = option.series[0].links
let flag = -1
for(let i = 0; i<data.length;i++){
if (data[i].id===1){
data.splice(i,1)
link.splice(i-1,1)
flag = i
}
}
for(let i = flag; i<data.length;i++){
data[i].id--
if (i!==data.length){
link[i-1].target--
}
}
this.chart.setOption(option)
//delete node END
}
````
### Current Behavior
Cannot add or delete node connections normally
### Expected Behavior
Nodes can be added or deleted normally without making the node id continuous.
### Environment
````markdown
- OS:windows11
- Browser:edge
- Framework:vue@2
````
### Any additional comments?
_No response_
</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