桑基图文字颜色怎么改？

[hylerrix]

你好，我是可视化新手，不是很熟悉。文档 / TypeScript / 源码 也半天没定位到位置，这个很基础的问题，有人帮忙解答下嘛。谢谢！想要把文字改成 #FFF 白色。

我试了如下方案都不行：

config 里的 key：

const config = {
  data: DATA,

  nodeStyle: { color: 'red' },
  series: [{ label: { color: "red" } }],
  theme: { styleSheet: { color: 'red' } },
  statistic: { style: { color: 'red' } },
  label: { style: { fill: 'red' } },
  legend: { fill: 'red' },
  itemName: { style: { fill: 'red' } },
  itemStyle: { color: 'red' },
  text: { formatter: () => { return '#fff' } },

  sourceField: 'source',
  targetField: 'target',
  weightField: 'value',
  nodeWidthRatio: 0.008,
  nodePaddingRatio: 0.03,
  renderer: 'svg',
};
return <Sankey {...config} />;

都不行耶？

[pearmini]

使用的工具和版本是？

[hylerrix]

感谢回复！点进 import { Sankey } from '@ant-design/plots' 后，版本是 1.2.5。
有思路么？如果是最新的版本用哪个 api？我可以根据关键词搜下学习下。

使用的工具？Vs Code 🤣。

其实我就是从图例直接抄的没改多少 https://charts.ant.design/zh/examples/relation-plots/sankey/#alipay
也就是先不考虑版本的话，在这个图例里怎么改变文字颜色呢？

我渲染成 svg 后发现只要改文字的 fill 值就行。Sankey 组件需要什么 key 来让 fill 被改变呀？谢谢！

[hylerrix]

useEffect(() => {
  const timer = setTimeout(() => {
    const textElements = document.getElementById('ThreatMitigationMapSankey').querySelectorAll('svg text')

    textElements.forEach(text => {
      text.setAttribute('fill', 'rgba(255, 255, 255, 0.6)')
    })
  }, 100)
  return () => {
    clearTimeout(timer)
  }
}, [list])

实在找不到，我只能先把桑基图渲染成 svg 然后这么写了......