如何在 Nivo 散点图中为 React 设置单个点颜色答案

【问题标题】：How to Set Individual Point Colors in Nivo Scatterplot for React如何在 Nivo 散点图中为 React 设置单个点颜色
【发布时间】：2020-12-20 15:09:27
【问题描述】：

我使用 React 的“@nivo/scatterplot”创建了一个图表。我可以在图形定义中使用colors='#FF0000' 之类的东西成功设置所有点的颜色，但我不知道如何设置单个点的颜色（例如，基于其值）。我不想应用 nivo 方案，因为它适用于每个组，我想应用每个点并控制每个点的颜色。有没有办法做到这一点？

【问题讨论】：

标签： reactjs colors scatter-plot scatter nivo-slider

【解决方案1】：

是的，您可以通过将函数传递给 colors 属性来有条件地更改 Nivo 散点图点的颜色：

import { Node } from '@nivo/scatterplot'

colors={(node: Node) => {
        return node.y > 5 ? 'red' : 'black'
}}

【讨论】：