Question

我对D3.js的学习和演讲感到非常兴奋。而且我被困在数据导入部分。我已经尝试了一个月，但找不到解决方案。

如果数据只是粘贴在代码中，脚本就可以正常工作。但是，一旦我尝试从脚本外部导入数据。该网页不会显示任何内容。

有人可以帮我一臂之力吗？

以下是我的脚本和数据：

工作版：

<!DOCTYPE html>
<html>
<head>    
    <charset=utf-8">
    <title>Successful Data Comination In Bar Chart</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
    <script>

    var dataset = [{"name":"AAA", "age":10},{"name":"BBB", "age":20},{"name":"CCC", "age":30}];

    var canvas = d3.select("body").append("svg")
            .attr("width", 500)
            .attr("height", 500);

    canvas.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("width", function (d) { return d.age*10; })
            .attr("height", 48)
            .attr("y", function (d,i) { return i*50; })
            .attr("fill", "gray");

    canvas.selectAll("text")
            .data(dataset)
            .enter()  
            .append("text")
            .attr("fill", "white")
            .attr("x", 2)
            .attr("y", function (d,i) { return i*50 +27; })
            .text(function (d) { return d.name + " "  + d.age; }); 

    </script>
</body>
</html>

不能正常使用版本：

<!DOCTYPE html>
<html>
<head>    
    <charset=utf-8">
    <title>Testing Pie Chart</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
</head>

<body>
    <script>

    var dataset = [];

    d3.json("mydata.json", function(data) {

        dataset = data;

        var canvas = d3.select("body").append("svg")
            .attr("width", 500)
            .attr("height", 500);



        canvas.selectAll("rect")
            .data(dataset)
            .enter()
                .append("rect")
                .attr("width", function (d) { return d.age*10; })
                .attr("height", 48)
                .attr("y", function (d,i) { return i*50; })
                .attr("fill", "gray");

        canvas.selectAll("text")
            .data(dataset)
            .enter()  
                .append("text")
                .attr("fill", "white")
                .attr("x", 2)
                .attr("y", function (d,i) { return i*50 +27; })
                .text(function (d) { return d.name + " "  + d.age; }); 
    });

    </script>
</body>
</html>

名为“mydata.json”的json数据如下：

[
    {"name": "AAA", "age": 10},
    {"name": "BBB", "age": 20},
    {"name": "CCC", "age": 30}
]

我是Stackoverflow的新手，并尝试按我的意愿编辑它，但并不完美。如果您对代码感到困惑，请随时告诉我。我会解释一下，因为我真的想解决这个问题。非常感谢！

谢谢你给我小费！期待您的回复！

Answer 1

这是名为same-origin policy的浏览器中的安全功能。您可以通过启动浏览器选项的开发工具并查看尝试获取JSON文件时发生的情况来查看此操作。

有各种方法可以解决这个问题。如果您有权访问虚拟主机，请将其丢弃。否则，请选择一种在本地运行轻量级服务器的方法。人们经常被告知的最简单的方法是在python中提供index.html文件：

#(in v2.x)
python -m SimpleHTTPServer 8000

#(in v3.x)
python -m http.server 8000

然后浏览到localhost：8000。有关d3 wiki的更详细解释。有关更深入的解释和诸如此类的内容，我建议some reading。

如何正确地将数据导入d3js

1 个答案: