javascript - 如何将 JSON 转换成 d3.js 可以使用的东西

Question

我一直在尝试将这样的 JSON 转换成 d3 可以使用的东西，但我遇到了一些麻烦。这是示例 JSON

[{
    "name" : "MATH210",
    "work" : {
        "assessment1" : {
            "mark" : 65,
            "weight" : 40
        },
        "assessment2" : {
            "mark" : 65,
            "weight" : 60
        }
    },
    "overallMark" : 95
},
{
    "name" : "MATH215",
    "work" : {
        "assessment1" : {
            "mark" : 67,
            "weight" : 30
        },
        "assessment2" : {
            "mark" : 65,
            "weight" : 45
        },
        "exam" : {
            "mark" : 72,
            "weight" : 25
        }
    },
    "overallMark" : 85
},
{
            "name" : "MATH220",
        "work" : {
        "assessment1" : {
            "mark" : 65,
            "weight" : 50
        },
        "assessment2" : {
            "mark" : 65,
            "weight" : 50
        }
    },
    "overallMark" : 75
    }]

我是 d3 的新手，但我阅读和完成的所有示例都包含数组形式的数据，因此这是我的第一种方法所关注的。

我将发布一些代码，以便您更好地理解我所做的事情。所以我首先使用如下代码创建一个包含来自 JSON 的模块对象的数组

var count = 0;

// loop through json and instantiate each
// module and store in the modules array
$.each(json, function(i, item) {

    progress.modules[count] = new Module( i , item );
    count++;

});

然后我使用大量嵌套的 for/in 循环来提取我想要的数据并将它们存储在每个模块的大量数组中，每个模块有 3 个不同的数组。

// Arrays that will hold all the broken down data
this.workNames = [], this.marks = [], this.weights = [];

这种方法可行，但不适用于大量数据。

我想做的就是根据总体分数及其权重绘制一些饼图和散点图。从我在 stack overflow 和整个网络上的其他地方阅读的内容来看，我觉得有一种更优雅的方式来获取这些数据并将其转换为 d3 可以使用的东西。

也许像这样使用 d3.nest()

D3 JSON data conversion

有没有人知道如何在不使用上述方法的情况下转换此 JSON 以与 d3 一起正常工作？

提前致谢:)

Answer 1

让我们看一下整体转换的一个子任务。考虑一下您拥有的这一点数据，它以对象的对象(又名散列)的形式存在:

{
    "assessment1" : {
        "mark" : 67,
        "weight" : 30
    },
    "assessment2" : {
        "mark" : 65,
        "weight" : 45
    },
    "exam" : {
        "mark" : 72,
        "weight" : 25
    }
}

最有可能的是，您想将其转换为以下对象数组:

[
    {
        "id": "assessment1"
        "mark" : 67,
        "weight" : 30
    },
    {
        "id": "assessment2"
        "mark" : 65,
        "weight" : 45
    },
    {
        "id" : "exam"
        "mark" : 72,
        "weight" : 25
    }
]

因此，如果将原始数据分配给名为 work 的 var，那么这就是您将其转换为数组的方式:

var workAsArray = []; // This will be the resulting array
for(var key in work) {
  var entry = work[key]; // This will be each of the three graded things
  entry.id = key; // e.g. "id": "assessment1"
  workAsArray.push(entry)
}

这种方法也可以应用于包含这个“工作”数组的外层数据，然后上面的代码片段将嵌套在一个外层循环中。

希望这对您有所帮助....

附言

d3.nest 在这种情况下不会帮助您，因为它确实与您的要求相反。它有助于将数据数组转换为散列。