d3.js - 在 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为空的地方放置一个空格？

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>)