[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???

[GitBox]

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: 
   
![image](https://user-images.githubusercontent.com/31986084/190989536-cb7e4db8-94cf-4353-adde-ffbb02e1270f.png)
   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-unsubscr...@echarts.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org