将对象数据转换为 d3plus-react 的数组答案

【问题标题】：Transforming object data to array for d3plus-react将对象数据转换为 d3plus-react 的数组
【发布时间】：2019-10-06 01:42:01
【问题描述】：

我有一个 api，它以以下格式返回数据：

{
    "Information Technology": {
        "Name": "Information Technology",
        "Change": "0.82%"
    },
    "Consumer Staples": {
        "Name": "Consumer Staples",
        "Change": "0.19%"
    }
}

我想在我的 d3plus 可视化中将其转换为以下格式：

[
    {
        "Name": "Information Technology",
        "Change": "0.82%"
    },
    {
        "Name": "Consumer Staples",
        "Change": "0.19%"
    }
]

我该怎么做。这是我使用 d3plus 的 React 组件：

function Chart() {
    const methods = {
        groupBy: 'Name',
        data: 'https://example.com/api/sectors-performance',
        size: d => d.Change
    };

    return <Treemap config={methods} />;
}

【问题讨论】：

标签： d3.js d3plus

【解决方案1】：

docs 中有一个小提示帮助我想出了这个解决方案：

function Chart() {
    const methods = {
        groupBy: 'id',
        data: 'https://example.com/api/sectors-performance',
        size: d => d.value
    };

    const formatter = d =>
        Object.keys(d).map(key => ({
            id: d[key].Name,
            value: numeral(d[key].Change).value()
        }));

    return <Treemap config={methods} dataFormat={formatter} />;
}

诀窍是将格式化程序作为属性发送！

【讨论】：