在react-d3中只过滤掉chartSeries中的一个序列

Question

我正在使用react-d3创建一个具有多个相关数据集的图，我遇到的问题是其中一个数据集不一定对另一个数据集的每个点都有一个条目。我可以将值设置为0，但这会创建有数据的外观，但它是0，但事实并非如此。

下面是我的代码(deliverRate总是有数据，adjustedRate不一定有数据)：

const chartSeries = [
        {
            field: 'deliverRate',
            name: 'Delivery Rate',
            color: "#ff7f03"

        },
        {
            field: 'adjustedRate',
            name: 'Adjusted Rate',
            color: 'blue'
        }
    ];

    const x = function (d) {
        return new Date(d.generatedAt);
    }

    return (
        <div>
            <LineTooltip
                data={deliveryInfo.throttleHistory}
                width={1000}
                height={300}
                chartSeries={chartSeries}
                yLabel="Rate"
                x={x}
                xScale="time"
                xDomain={d3.extent(deliveryInfo.throttleHistory,function(d){return x(d)})}
                xLabel="Date"

            >
                <SimpleTooltip/>
            </LineTooltip>
        </div>)

有没有办法创建一个过滤器，只在adjustedRate为null的地方放一个空格？

Answer 1

只需在函数x d.adjustedRate = d.adjustedRate||'';中添加下面这一行

const chartSeries = [
            {
                field: 'deliverRate',
                name: 'Delivery Rate',
                color: "#ff7f03"

            },
            {
                field: 'adjustedRate',
                name: 'Adjusted Rate',
                color: 'blue'
            }
        ];

        const x = function (d) {
            d.adjustedRate = d.adjustedRate||'';
            return new Date(d.generatedAt);

        }

        return (
            <div>
                <LineTooltip
                    data={deliveryInfo.throttleHistory}
                    width={1000}
                    height={300}
                    chartSeries={chartSeries}
                    yLabel="Rate"
                    x={x}
                    xScale="time"
                    xDomain={d3.extent(deliveryInfo.throttleHistory,function(d){return x(d)})}
                    xLabel="Date"

                >
                    <SimpleTooltip/>
                </LineTooltip>
            </div>)