Javascript Can'；t在D3中读取json_Javascript_Jquery_Html_Json_D3.js

Javascript Can'；t在D3中读取json

javascript jquery html json d3.js

Javascript Can'；t在D3中读取json,javascript,jquery,html,json,d3.js,Javascript,Jquery,Html,Json,D3.js,我尝试使用D3库读取json文件，但当我尝试读取json时，会得到警报空值（这里我使用的是警报）如何解决此问题？如果在浏览器中运行，则无法加载本地文件。我建议将数据上传到在线的某个地方，比如，然后使用d3.json（）请求它喜欢： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Simple venn.js example&l

我尝试使用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( "https://gist.githubusercontent.com/kvyb/d482dc15602c34841d4796daa9ed64cb/raw/d737e19c03868adf2f15103fcd98384f4c364785/file.json", function(json) {
  alert( "JSON Data: " + json)
});
</script>
</html>


简单的venn.js示例
d3.json（“https://gist.githubusercontent.com/kvyb/d482dc15602c34841d4796daa9ed64cb/raw/d737e19c03868adf2f15103fcd98384f4c364785/file.json，函数（json）{
警报（“JSON数据：”+JSON）
});

否则，您可以将其硬编码到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>


简单的venn.js示例
var json=[{
“集合”：[0]，
“尺寸”：1958年
},
{
“集合”：[1]，
“大小”：1856
},
{
“集合”：[2]，
“大小”：1297
},
{
“集合”：[0,1]，
“尺寸”：220
},
{
“集合”：[2,0]，
“尺寸”：123
},
{
“集合”：[2,1]，
“尺寸”：139
}
]
警报（“JSON数据：”+JSON）

如果您不介意使用其他库，有一种本地加载的解决方案。

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

使用浏览器工具中的“网络”选项卡，检查是否正在加载文件。您可能会收到404文件。json在哪里？是否在同一目录中？@man data您必须打赌错误XMLHttpRequest无法加载“跨源请求仅支持协议方案：http、data、chrome、chrome扩展名、https。”@Dinesh yes它们在同一目录中加载的文件是否在同一目录中？您可以在developer tools网络选项卡vyBrial中检查，我知道如何使用Jquery，但我需要使用D3阅读，因为我使用的是D3函数。我不能在本地读取json。恐怕只有D3是没有办法的。

<!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>

<!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>