[Feature] Specify Node Relationships in Graph using "id" Attribute

[zshtxwd]

What problem does this feature solve?

In the graph component, it is necessary to add an "id" attribute to each element in the data, and then use this "id" to establish connections in the "links" through the "target" and "source" attributes.

When working with the graph, a unique identifier is needed to handle cases where nodes have the same name. While the ECharts documentation mentions that the "links" support using "name" and the index of data, using "name" may lead to situations with identical names, and using the index is not convenient when dealing with dynamic data.

I propose using an "id" to specify nodes and establish connections through the "links." In fact, ECharts already supports using "id," but this is not explicitly documented. It's important to note that the "id" cannot be a number; it must be a string. If it's a number, ECharts recognizes it as a data index.

You can then use these "id" values in the "links," where the "target" and "source" values should be the same as the "id" set in the data.

I will provide an example below. If this is not a bug, I suggest documenting this feature. If it is a bug, I hope this functionality can be made available in the next release.

What does the proposed API look like?

example

 data: [
        { name: '李白', category: '亲人', id: '1' },
        { name: '杜甫', category: '亲人', id: '2' },
        { name: '李白', category: '租户', id: '3' },
        { name: '王之涣', category: '租户', id: '4' },
        { name: '王之涣', category: '亲人', id: '5' },
        { name: '杜甫', category: '亲人', id: '6' }
      ],
links: [
        { source: '4', target: '5', value: '夫妻' },
        { source: '2', target: '3', value: '租赁' },
        { source: '3', target: '4', value: '亲人' },
        { source: '1', target: '5', value: '亲人' },
        { source: '1', target: '2', value: '亲人' },
        { source: '4', target: '6', value: '亲人' },
      ]

[helgasoft]

source and target could be set as numerical node dataIndex and node names could be duplicated. See official example and try multiple happy Fridays.

[zshtxwd]

I understand that dataIndex can be used, but it is not as convenient when dealing with dynamic data. It is more suitable for dynamic data. We need an attribute like 'id' or a similar one to better specify the source and target relationships in cases where names are the same. This would also facilitate storing data in a database on the backend or handling data sent from the backend more conveniently.

[zshtxwd]

I accidentally closed this issue.

[helgasoft]

agree, proposal makes sense for database use. But there is a simple solution through data preparation - Demo Code.

[zshtxwd]

Thank you for your reply. Yes, I am aware, but in fact, your ECharts already supports directly using IDs to specify source and target. Can you please add this feature to the documentation?

I can directly use code like this to implement it

data = [
  { name: '李白', category: '亲人', id: '1' },
  { name: '杜甫', category: '亲人', id: '2' },
  { name: '李白', category: '租户', id: '3' },
  { name: '王之涣', category: '租户', id: '4' },
  { name: '王之涣', category: '亲人', id: '5' },
  { name: '杜甫', category: '亲人', id: '6' }
];
links = [
  { source: '4', target: '5', value: '夫妻' },
  { source: '2', target: '3', value: '租赁' },
  { source: '3', target: '4', value: '亲人' },
  { source: '1', target: '5', value: '亲人' },
  { source: '1', target: '2', value: '亲人' },
  { source: '4', target: '6', value: '亲人' }
]
option = {
  series: {
    type: 'graph', 
    layout: 'force', force:{repulsion:999},
    lineStyle: { width:4 },
    symbolSize: 55, label:{show: true},
    //edgeLabel:{show: true},
    data: data, 
    links: links,
    categories: [
      {name:'亲人',itemStyle:{color:'red'}},
      {name:'租户',itemStyle:{color:'blue'}}
    ],
  }
};

You can directly use it without the need to convert dataIndex.

[helgasoft]

wow, you are right, links work directly with node IDs! So that's another documentation omission (Easter egg) 🐣 Someday, someone, will fix them all... ⌛

[zshtxwd]

I'm looking forward to it

[Nicooow]

I'm reopening this issue as I encountered the same problem with a Sankey diagram. However, for Sankey diagrams, the id is prioritized over the name, making this technique ineffective!

The solution is to use a formatter: as shown here