0

I get pretty excited about the D3.js studying and presentation. And I get stuck on the data importing part. I've tried one month now, and couldn't find a solution for it.

If the data is simply pasted in the code, the scripts works perfectly fine. But once I tried to import the data from outside the script. The webpage won't show anything.

Can someone be kind enough to give me a hand?

Here are my scripts and data:

Working version:

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

Not working version:

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

The json data named "mydata.json" is like:

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

I am new to Stackoverflow, and trying to edit it as I want, but not perfect. Please feel free to let me know if you get confused about the codes. I will explain, cause I really want to solve this. Thanks a lot!

Thanks for tipping me off! Looking forward to your reply keenly!

4

1 回答 1

1

这是浏览器中的一项安全功能，称为同源策略。您可以通过启动您选择的浏览器的开发工具并查看它尝试获取您的 JSON 文件时发生的情况来查看此操作。

有多种方法可以解决此问题。如果您可以访问网络托管，请将其扔在那里。否则，选择一种方法在本地运行轻量级服务器。人们经常被告知的最简单的方法是index.html在 python 中提供一个文件：

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

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

然后浏览到 localhost:8000。这在d3 wiki上有更详细的解释。对于更深入的解释等等，我推荐一些阅读。

于 2013-07-22T18:44:43.153 回答