const spec = {
type: 'sankey',
data: [
{
name: 'data',
values: [
{
nodes: [
{
// value: 100,
name: 'A',
children: [
{
name: 'top',
// value: 40,
children: [
{ name: '00', value: 15 },
{ name: '01', value: 10 },
{ name: '02', value: 10 }
]
},
{
name: 'middle',
// value: 30,
children: [
{ name: '00', value: 10 },
{ name: '01', value: 10 },
{ name: '02', value: 10 }
]
},
{
name: 'bottom',
value: 30
}
]
},
{
// value: 80,
name: 'B',
children: [
{
name: 'top',
// value: 40,
children: [
{ name: '00', value: 100 },
{ name: '01', value: 40 }
]
},
{
name: 'middle',
value: 10
},
{
name: 'bottom',
value: 30
}
]
},
{
value: 50,
name: 'C',
children: [
{
name: 'top',
value: 20
},
{
name: 'middle',
value: 20
},
{
name: 'bottom',
value: 10
}
]
}
]
}
]
}
],
categoryField: 'name',
valueField: 'value',
color: {
field: 'color',
type: 'ordinal',
domain: ['A', 'top', '00', '01', '02', 'middle', 'bottom', 'B', 'C'],
range: ['#fd7f6f', '#7eb0d5', '#b2e061', '#bd7ebe', '#ffb55a', '#ffee65', '#beb9db', '#fdcce5', '#8bd3c7']
},
nodeAlign: 'left',
nodeGap: 8,
nodeWidth: 10,
minNodeHeight: 4,
nodeKey: datum => datum.name,
label: {
visible: true,
formatMethod: (text, datum) => {
// console.log('text', text);
// console.log('datum', datum);
return datum.name + '-' + datum.value;
},
state: {
blur: {
fill: '#e8e8e8',
fillOpacity: 0.15
}
}
},
legends: {
visible: true
},
node: {
state: {
hover: {
fill: 'red'
},
blur: {
fill: '#e8e8e8',
fillOpacity: 0.15
}
}
},
link: {
state: {
selected: {
backgroundStyle: { fill: '#e8e8e8' }
},
hover: {
stroke: '#000000'
},
blur: {
fill: '#e8e8e8'
}
}
},
emphasis: {
enable: true,
effect: 'related'
}
};
- OS:
- Browser:
- Framework:
Version
1.4.0
Link to Minimal Reproduction
null
Steps to Reproduce
Current Behavior
Setting color in spec does not take effect
Expected Behavior
Setting color in spec takes effect
Environment
Any additional comments?
No response