html - 为 D3 请求嵌入的 JSON 数据

Question

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

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

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

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

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

遵循此线程后，我已经能够将嵌入的 JSON 传递给对象： Best practice for embedding任意 JSON in the DOM?

我现在如何才能成功地将这个对象传递给 D3 条形图？

score 2 · Accepted Answer

解析嵌入的 JSON 对象是困难的部分，所以你基本上已经弄清楚了。一旦您将嵌入的 JSON 解析并传递给一个对象，您就可以开始使用该对象了。

以您的示例为基础，假设您在页面中嵌入了此 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);
...

score 0 · Accepted Answer

您链接到的问题中描述的方法将起作用。只需调用您在 D3 代码中使用的任何变量，例如

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

2 回答 2