Question

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

这是我的代码，（deliverRate总是有数据，adjustRate不一定有数据）：

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

有没有办法创建一个只在adjustRate为空的位置放置空格的过滤器？

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

过滤掉react-d3中chartSeries中的一个系列

1 个答案: