Question

我想为时间序列D3多线图转换嵌套的JSON对象。我想改变这个：

[
{
    "utc_date": "2012-12-13T00:00:00.000Z",
    "data": {
        "view": {
            "count": 9061
        },
        "purchase": {
            "count": 254
        }
    }
},
{
    "utc_date": "2012-12-14T00:00:00.000Z",
    "data": {
        "view": {
            "count": 17232
        },
        "purchase": {
            "count": 539
        }
    }
},
{
    "utc_date": "2012-12-15T00:00:00.000Z",
    "data": {
        "view": {
            "count": 28783
        },
        "purchase": {
            "count": 936
        }
    }
}]

这样的事情（或更好？）

[
    {
        "key": "view",
        "data": [
            {
                "date": "2012-12-13T00:00:00.000Z",
                "count": 9061
            },
            {
                "date": "2012-12-14T00:00:00.000Z",
                "count": 17232
            },
            {
                "date": "2012-12-15T00:00:00.000Z",
                "count": 28783
            }
        ]
    },
    {
        "key": "purchase",
        "data": [
            {
                "date": "2012-12-13T00:00:00.000Z",
                "count": 254
            },
            {
                "date": "2012-12-14T00:00:00.000Z",
                "count": 539
            },
            {
                "date": "2012-12-15T00:00:00.000Z",
                "count": 936
            }
        ]
    }
]

要清楚，＆＃34;查看＆＃34;和＆＃34;购买＆＃34;不会被人知道并且是动态的。因此，他们不应该被硬编码到示例中。

但是仍然想知道是否有任何D3.js方法或方法链来转换这些数据？

Answer 1

假设您的原始数组是data，您可以执行以下操作：

V=data.map(function(d){
    w=d.data; 
    M=Array();
    for (e in w) {  // to loop for all parameters
        M.push({"date":d.utc_date, "param":e,"count":w.view.count})
    }
    return M;
})

V=d3.merge(V)

V=d3.nest().key(function(d){return d.param}).entries(V);

V将保留您的新数据结构。

我相信这可以进一步改善。

修改如果你只是附加到另一个数组开始，你甚至可能不需要d3.merge。

M=Array(); V=data.map(function(d){ w=d.data; for (e in w) { M.push({"date":d.utc_date, "param":e,"count":w.view.count}) } }) V=d3.nest().key(function(d){return d.param}).entries(M);

我会让你体验并看到性能和代码结构的差异。

希望有所帮助

Answer 2

只是改进下面的@Nikos答案以满足动态键的需求，虽然它没有使用D3方法链，但这有效：

var result = [];
data.forEach(function(d) {
    w = d.data;
    for (var k in w) {
        if (w.hasOwnProperty(k)) {
            result.push({
                "date":d.utc_date,
                "type":k,
                "count":w[k].count
            });
        }
    }
});

JSFiddle：http://jsfiddle.net/3umm391n/8/

将嵌套数组转换为D3多行时间序列

2 个答案: