Javascript 如何将JSON转换为d3.js可以使用的内容_Javascript_Json_D3.js

Javascript 如何将JSON转换为d3.js可以使用的内容

javascript json d3.js

Javascript 如何将JSON转换为d3.js可以使用的内容,javascript,json,d3.js,Javascript,Json,D3.js,我一直在尝试将JSON转换成d3可以使用的东西，但我遇到了一些麻烦。下面是JSON示例 [{ "name" : "MATH210", "work" : { "assessment1" : { "mark" : 65, "weight" : 40 }, "assessment2" : { "mark" : 65, "weight" : 60

我一直在尝试将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和整个web上的其他地方读到的内容来看，我觉得有一种更优雅的方式来获取这些数据并将其转换为d3可以使用的东西

也许可以像这样使用d3.nest（）

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++;

});

有没有人知道我如何在不使用上述方法的情况下，将这个JSON转换为与d3一起工作的好方法

提前感谢：）

让我们看看整体转换的子任务。考虑一下你所拥有的数据，它是对象（Akhash）对象的形式：

{
    "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
    }
]

最可能的情况是，要将其转换为以下对象数组：

{
    "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 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)
}

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

希望这有帮助

附言

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

这里是我制作的一个小转换器，它可以将任何JSON格式更改为d3格式：

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>

//Eample JSON
var complexJson = {
"problems": [{
    "Diabetes":[{
        "medications":[{
            "medicationsClasses":[{
                "className":[{
                    "associatedDrug":[{
                        "name":"asprin",
                        "dose":"",
                        "strength":"500 mg"
                    }],
                    "associatedDrug#2":[{
                        "name":"somethingElse",
                        "dose":69,
                        "strength":"500 mg"
                    }]
                }],
                "className2":[{
                    "associatedDrug":[{
                        "name":"asprin",
                        "dose":"",
                        "strength":"500 mg"
                    }],
                    "associatedDrug#2":[{
                        "name":"somethingElse",
                        "dose":"",
                        "strength":"500 mg"
                    }]
                }]
            }]
        }],
        "labs":[{
            "missing_field": "missing_value",
            "boolean_field": true
        }]
    }],
    "Asthma":[{}]
}]};

//Test if we should dig deeper
function hasJsonStructure(str) {
    if (typeof str === 'string') return false;
    try {
        return Object.prototype.toString.call(str) === '[object Object]' || Array.isArray(str);
    } catch (err) {
        return false;
    }
};


//Parse and convert object recursive
function walk2(obj2,level) {
    var mytempCH = [];
    var outer = [];
    for (var key in obj2){
        var value = obj2[key];
        if(hasJsonStructure(value)){
            //has children
            var mytempCH2 = new Object();
            mytempCH2.name = key;
            mytempCH2.children = walk2(value,level+1);
            outer.push(mytempCH2);
        }else{
            outer.push({"name": key + ": " + value, "value": level})
        }
      }
      return outer
}

//Preapare Object Root
var myNewObj = new Object();
myNewObj.name = "ConvertedObj";
myNewObj.children = [];
var level = 1;
//Start work
myNewObj.children = walk2(complexJson,1);

//Output text to html
document.getElementById("demo").innerHTML = JSON.stringify(myNewObj); + "<br>";;
</script>

</body>
</html>



//Eample JSON
var complexJson={
“问题”：[{
“糖尿病”：[{
“药物”：[{
“药物分类”：[{
“类名”：[{
“相关药物”：[{
“名称”：“阿斯普林”，
“剂量”：“，
“强度”：“500毫克”
}],
“相关药物2”：[{
“姓名”：“某物”，
“剂量”：69，
“强度”：“500毫克”
}]
}],
“类别名称2”：[{
“相关药物”：[{
“名称”：“阿斯普林”，
“剂量”：“，
“强度”：“500毫克”
}],
“相关药物2”：[{
“姓名”：“某物”，
“剂量”：“，
“强度”：“500毫克”
}]
}]
}]
}],
“实验室”：[{
“缺少_字段”：“缺少_值”，
“布尔_字段”：真
}]
}],
“哮喘”：[{}]
}]};
//测试我们是否应该深入挖掘
函数hasJsonStructure（str）{
if（typeof str=='string'）返回false；
试一试{
返回Object.prototype.toString.call（str）=='[Object-Object]'| | Array.isArray（str）；
}捕捉（错误）{
返回false；
}
};
//递归解析和转换对象
功能演练2（obj2，级别）{
var mytempCH=[]；
var外部=[]；
用于（obj2中的var键）{
var值=obj2[键]；
if（hasJsonStructure（value））{
//有孩子
var mytempCH2=新对象（）；
mytempCH2.name=key；
mytempCH2.children=walk2（值，级别+1）；
外推（mytempCH2）；
}否则{
outer.push（{“name”：key+”：“+value”，value:level}）
}
}
返回外部
}
//预备对象根
var myNewObj=新对象（）；
myNewObj.name=“ConvertedObj”；
myNewObj.children=[]；
风险等级=1；
//开始工作
myNewObj.children=walk2（complexJson，1）；
//将文本输出到html
document.getElementById（“demo”）.innerHTML=JSON.stringify（myNewObj）；+“
”；；

将您的代码放入json lint中并进行验证。如果它没有错误，那么使用传统方法就足够了

d3.json（“data.js”，函数（data）{alert（data.length）}）…如果您发现错误，请修改它以感谢此人。在我发布这个问题大约一个小时后，我完全做到了这一点，我将所有工作对象转换为数组，这样d3就可以使用它们了，但仍然感谢您的回答。向我保证我采取了正确的方法：）