无法读取 D3 中的 json

我正在尝试使用 D3 库读取 json 文件，但当我尝试读取 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
    }
 ]

我该如何解决此类问题？

如果您在浏览器中运行，则无法加载本地文件。我建议将数据上传到网上的某个地方，比如这里，然后用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>

否则，您可以将其硬编码到您的 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 解决方案在本地加载等。

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

相关内容

最新更新

热门标签：