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/09/08 12:22:58 UTC
[GitHub] [echarts] baarbaracrr opened a new issue, #17635: How can I create a graph where I can move the position nodes and the unions (links) adapt???
baarbaracrr opened a new issue, #17635:
URL: https://github.com/apache/echarts/issues/17635
### Version
5.3
### Link to Minimal Reproduction
_No response_
### Steps to Reproduce
https://echarts.apache.org/examples/en/index.html#chart-type-graph
### Current Behavior
I am not able to change the position of the nodes of a graph, and the only thing I can do is move the entire graph. I want each node to be in an exact position and to be able to move them and for the links to adapt (stretch or get smaller depending on the distance)
### Expected Behavior
I want to do something like this https://echarts.apache.org/examples/en/editor.html?c=line-draggable but with a graph where i can manipulate the nodes and links.
### Environment
```markdown
- OS:
- Browser:
- Framework:
```
### 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] Ovilia commented on issue #17635: How can I create a graph where I can move the position nodes and the unions (links) adapt???
Posted by GitBox <gi...@apache.org>.
Ovilia commented on issue #17635:
URL: https://github.com/apache/echarts/issues/17635#issuecomment-1241661290
You should follow the logic of https://echarts.apache.org/examples/en/editor.html?c=line-draggable and make sure the `layout` of your graph series should be `'none'` and you need to provide `x` and `y` for each nodes.
--
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] baarbaracrr commented on issue #17635: How can I create a graph where I can move the position nodes and the unions (links) adapt???
Posted by GitBox <gi...@apache.org>.
baarbaracrr commented on issue #17635:
URL: https://github.com/apache/echarts/issues/17635#issuecomment-1250793451
> You should follow the logic of https://echarts.apache.org/examples/en/editor.html?c=line-draggable and make sure the `layout` of your graph series should be `'none'` and you need to provide `x` and `y` for each nodes.
Hi Olivia, thanks for your answer, but I still can't get it. I have this in the HTML code:
`<div echarts [options]="chartOption" (chartInit)="onChartInit($event)" id="main" class="mapDiagram nodes">`
And in the Typescript code I have this:
```
import { Component, OnInit, AfterViewInit } from '@angular/core';
import { EChartsOption } from 'echarts';
import * as echarts from 'echarts';
@Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.css']
})
export class LayoutComponent implements AfterViewInit {
public myChart: any;
public chartOption: EChartsOption = {};
public symbolSize = 20;
public data = [
[15, 0],
[-50, 10],
[-56.5, 20],
[-46.5, 30],
[-22.1, 40]
];
constructor() {
}
ngOnInit(): void {
}
ngAfterViewInit(): void {
this.chartOption = {
xAxis: {
min: -100,
max: 80,
type: 'value',
axisLine: { onZero: false }
},
yAxis: {
min: -30,
max: 60,
type: 'value',
axisLine: { onZero: false }
},
series: [
{
id: 'a',
type: 'line',
smooth: true,
// Set a big symbolSize for dragging convenience.
symbolSize: this.symbolSize,
data: this.data
}
]
};
}
onChartInit(ec: any) {
this.myChart = ec;
let that = this;
this.myChart.setOption({
// Declare a graphic component, which contains some graphic elements
// with the type of 'circle'.
// Here we have used the method `echarts.util.map`, which has the same
// behavior as Array.prototype.map, and is compatible with ES5-.
graphic: echarts.util.map(this.data, function(dataItem, dataIndex) {
return {
// 'circle' means this graphic element is a shape of circle.
type: 'circle',
shape: {
// The radius of the circle.
r: that.symbolSize / 2
},
// Transform is used to located the circle. position:
// [x, y] means translate the circle to the position [x, y].
// The API `convertToPixel` is used to get the position of
// the circle, which will introduced later.
position: that.myChart.convertToPixel('grid', dataItem),
// Make the circle invisible (but mouse event works as normal).
invisible: true,
// Make the circle draggable.
draggable: true,
// Give a big z value, which makes the circle cover the symbol
// in line series.
z: 100,
// This is the event handler of dragging, which will be triggered
// repeatly while dragging. See more details below.
// A util method `echarts.util.curry` is used here to generate a
// new function the same as `onPointDragging`, except that the
// first parameter is fixed to be the `dataIndex` here.
ondrag: function (dx: number, dy: number) {
that.onPointDragging(dataIndex, [dx, dy]);
}
};
})
});
}
onPointDragging(dataIndex: any, pos: number[]) {
// Here the `data` is declared in the code block in the beginning
// of this article. The `this` refers to the dragged circle.
// `this.position` is the current position of the circle.
this.data[dataIndex] = this.myChart.convertFromPixel('grid', pos);
// Re-render the chart based on the updated `data`.
this.myChart.setOption({
series: [
{
id: 'a',
data: this.data
}
]
});
}
}
```
But I can not resolve the next bug that appear in the console:
And the lines of the bug in my code is the next:
`position: that.myChart.convertToPixel('grid', dataItem),`
and
`graphic: echarts.util.map(this.data, function(dataItem, dataIndex) {`
--
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] baarbaracrr closed issue #17635: How can I create a graph where I can move the position nodes and the unions (links) adapt???
Posted by GitBox <gi...@apache.org>.
baarbaracrr closed issue #17635: How can I create a graph where I can move the position nodes and the unions (links) adapt???
URL: https://github.com/apache/echarts/issues/17635
--
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