🧐[问题] How to customize the sankey chart

[pranit-madhavi-v2stech]

🧐 问题描述 [详细地描述问题，让大家都能理解]

I want to customise the Sankey chart with custom node and edge color. for that I'm using nodeStyle and edgeStyle property in configuration. But when I use nodeStyle and edgeStyle as function, it does not give all the keys in data. it only gives name, x and y values.

💻 示例代码 [如果有必要，展示代码，线上示例，或仓库]

chart config
const config: any = { data: data, sourceField: 'source', targetField: 'target', weightField: 'value', nodeStyle: (a: any) => { if (a.name.includes("User")) { return { fill: "#597EF7" } } else if (a.name.includes("Automation")) { return { fill: "#03838B" } } else if (a.name.includes("Action")) { return { fill: "#C41D7F" } }else if (a.name.includes("Rule")) { return { fill: "#722ED1" } } else { return { fill: "#CED5EE" } } }, edgeStyle: (datum:any)=>{ console.log(datum); } // nodeWidthRatio: 0.008, }

data object
{ "source": "Rule 2", "target": "Automation 3", "value": 35, type: "rule" }

🚑 其他信息 [如截图等其他信息可以贴在这里]

console log

I want to customize chart as below

I want to customize the node and edge based on type. I'll use gradient for edges.
But how to access value, type (source and destination) inside nodeStyle and edgeStyle function to style node and edge?

current implementation
codesandbox: https://codesandbox.io/s/sankey-lxhc3

[lxfu1]

antvis/G2Plot#2533 , Recently released.

[pranit-madhavi-v2stech]

antvis/G2Plot#2533 , Recently released.

looks great.
It's not there in current version of G2Plot (2.3.19).
when will be this feature available in Ant Design Charts ?

[lxfu1]

Delete node_modules and reinstall.

[mantra-sanathra]

How we can pass the raw fields and use the value given by the data object into nodeStyle function? Is there any example available for this? I want to customize the color based on both the source and destination both.