为D3请求嵌入式JSON数据

Question

由于我不会厌烦你的原因，我的网页的所有元素都必须嵌入到一个文件中。

在HTML标头标签之间，我声明了有效 JSON数据：

<script type="application/json" id="data">
"name": "flare", "children":[{"name": "thing1", ... }]
</script>

以前，此数据已写入JSON文件，该文件由我的D3条形图脚本引用，如下所示：

d3.json("data/file.json", function(root) {
 hierarchy.nodes(root);
 x.domain([0, root.value]).nice();
 down(root, 0);
});

我可以在跟踪此线程后将嵌入的JSON传递给对象： Best practice for embedding arbitrary JSON in the DOM?

我现在如何成功将此对象传递到D3条形图？

Answer 1

解析嵌入式JSON对象是困难的部分，所以你基本上已经找到了这个。解析嵌入式JSON并将其传递给Object后，您就可以开始使用该对象。

建立您的示例，假设您在页面中嵌入了此JSON数据：

<script type="application/json" id="data">
    {"name": "flare", "children":[{"name": "thing1", ... }]}
</script>

然后而不是使用

d3.json("data/file.json", function(root) {
    ...
}

只提取您正在使用的函数的主体，并在顶部加载JSON对象：

var root = JSON.parse(document.getElementById('data').innerHTML);
hierarchy.nodes(root);
x.domain([0, root.value]).nice();
down(root, 0);
...

Answer 2

您链接到的问题中描述的方法将有效。只需在D3代码中调用变量即可，例如

var root = JSON.parse(document.getElementById('data').innerHTML);