gpt4 book ai didi

javascript - D3.js 无法加载 json 文件

转载 作者:搜寻专家 更新时间:2023-11-01 05:23:29 25 4
gpt4 key购买 nike

我正在尝试创建一个 D3.js packed circle diagram .

当我将数据嵌入到 HTML 文件中时,它工作正常。当我将数据放入外部文件时,我什么也得不到(空白 DOM,没有控制台消息)。

如果您取消注释 var 数据声明并注释掉 d3.json(和相应的右括号),它工作正常。

我可以在浏览器中看到“2013 Inf-2.json”文件,它看起来格式正确(它通过了 jsonlint 验证)。它包括从第一个“{”到/包括最后一个“}”的所有内容。与嵌入式示例非常相似。

我在 OSX Mavericks 上通过 httpd (:80) 运行它,并尝试在 Chrome 或 Safari 中呈现图表。

<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./d3.v3.min.js"></script>
</head>
<body>
<div id="chart2"></div>
<script type="text/javascript">
var w = 640, h = 480;
/*
var data ={
"name" : "root",
"children" : [
{
"name":"URIN TRACT INFECTION NOS",
"size":12196
},
{
"name":"ACUTE PHARYNGITIS",
"size":6679
},
{
"name":"PNEUMONIA ORGANISM NOS",
"size":6452
},
{
"name":"BRONCHITIS NOS",
"size":2636
},
{
"name":"CELLULITIS OF LEG",
"size":2348
},
{
"name":"OBSTR CHRONIC BRONCHITIS W (ACUTE) EXACERBATION",
"size":2203
}
]
}
*/
var data = d3.json("2013 Inf-2.json", function(error, root) {

var canvas = d3.select("#chart2")
.append("svg:svg")
.attr("width", w)
.attr("height", h);

var nodes = d3.layout.pack()
.value(function(d) { return d.size; })
.size([w, h])
.nodes(data);

// Get rid of root node
nodes.shift();

canvas.selectAll("circles")
.data(nodes)
.enter().append("svg:circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return d.r; })
.attr("fill", "green")
.attr("stroke", "grey");

});
</script>
</html>

最佳答案

你应该换行

var data = d3.json("2013 Inf-2.json", function(error, root) {

var data = d3.json("2013 Inf-2.json", function(error, data) {

所以你只需要用“data”替换“root”

关于javascript - D3.js 无法加载 json 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20577010/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com