How can I create a graph where I can move the position nodes and the unions (links) adapt???

[baarbaracrr]

Version

5.3

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.

Any additional comments?

btw i am using angular

No response

[Ovilia]

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.

[baarbaracrr]

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