d3.js - 将对象数据转换为 d3plus-react 的数组

Question

我有一个 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} />;
}

Answer 1

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

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} />;
}

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