无法读取D3中的json

我想读取使用D3库的json文件，但是当我尝试读取json时，我得到了警报空值（这里我使用了警报）。无法读取D3中的json

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Simple venn.js example</title> 
</head> 

<body> 
    <div id="weighted_example"></div> 
</body> 

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="https://d3js.org/d3.v4.min.js"></script> 

<script> 
d3.json("file.json", function(json) { 
    alert("JSON Data: " + json); 
}); 
</script> 
</html>

以下是file.json（这已经在网上验证）

[{ 
     "sets": [0], 
     "size": 1958 
    }, 
    { 
     "sets": [1], 
     "size": 1856 
    }, 
    { 
     "sets": [2], 
     "size": 1297 
    }, 
    { 
     "sets": [0, 1], 
     "size": 220 
    }, 
    { 
     "sets": [2, 0], 
     "size": 123 
    }, 
    { 
     "sets": [2, 1], 
     "size": 139 
    } 
]

如何解决这样的问题？

来源

2017-05-28 man data

在浏览器工具中使用网络选项卡，并检查文件正在加载您可能会得到一个404 – saj

其中是file.json？它在同一个目录中吗？ –

@ man-data您必须是投注错误XMLHttpRequest无法加载 “只有协议方案支持跨源请求：http，数据，chrome，chrome扩展名，https。” –

如果您在浏览器中运行，则无法加载本地文件。我建议在线上传数据，如here，然后用d3.json（）请求它。

Likeso：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Simple venn.js example</title> 
</head> 

<body> 
    <div id="weighted_example"></div> 
</body> 

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="https://d3js.org/d3.v4.min.js"></script> 

<script> 
d3.json("https://gist.githubusercontent.com/kvyb/d482dc15602c34841d4796daa9ed64cb/raw/d737e19c03868adf2f15103fcd98384f4c364785/file.json", function(json) { 
    alert("JSON Data: " + json) 
}); 
</script> 
</html>

否则，你可以硬编码到HTML文件：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Simple venn.js example</title> 
</head> 

<body> 
    <div id="weighted_example"></div> 
</body> 

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="https://d3js.org/d3.v4.min.js"></script> 

<script> 
var json = [{ 
     "sets": [0], 
     "size": 1958 
    }, 
    { 
     "sets": [1], 
     "size": 1856 
    }, 
    { 
     "sets": [2], 
     "size": 1297 
    }, 
    { 
     "sets": [0, 1], 
     "size": 220 
    }, 
    { 
     "sets": [2, 0], 
     "size": 123 
    }, 
    { 
     "sets": [2, 1], 
     "size": 139 
    } 
] 

alert("JSON Data: " + json) 

</script> 
</html>

如果你不介意使用其他库，有一个jquery解决加载本地，中其他。

来源

2017-05-28 13:41:01

Vybrial我知道如何使用jQuery，但我需要阅读使用D3，因为我使用D3功能。我不能在本地阅读json。 –

恐怕只有D3才有办法。 –

为了让这些文件在本地工作，您需要使用HTTP服务器。我个人使用MAMP的Mac机器。

来源

2017-11-19 04:23:32

无法读取D3中的json

回答

相关问题