无法将json数据加载到D3.JS中

Question

I've seen solutions to this years ago but I know they are out dated now, D3 has changed a bit. 我在几年前就已经看到了解决方案，但是我知道它们已经过时了，D3发生了一些变化。 I am a total beginner with D3.JS so I'm trying to understand it better by playing around with it. 我是D3.JS的初学者，所以我想通过玩它来更好地理解它。

I have a json file called mydata.json in the same folder as my D3 file. 我在与D3文件相同的文件夹中有一个名为mydata.json的json文件。 What the json file looks like is... json文件的外观是...

[

    {"name": "Maria", "age": 30},
    {"name": "Fred", "age": 50},
    {"name": "Francis", "age": 12}

]

and what the whole file looks like along with the script D3 file looks like is... 整个文件以及脚本D3文件的外观是...

<head>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>

<body>

<script>


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

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

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

</script>

</body>

I can't spot the error with my code and not basic graph is appearing, does anyone have any suggestions? 我无法用我的代码发现错误，并且没有出现基本图形，有人有任何建议吗？

Extra! 额外！

I did add in a console.log(data) to see what's happening and I did get this error message: 我确实添加了console.log（data）来查看发生了什么，并且得到了以下错误消息：

d3.v5.min.js:2 Fetch API cannot load file:///C:/Users/Tom/Desktop/D3.JS%20practice/mydata.json. URL scheme "file" is not supported.
t.json @ d3.v5.min.js:2

Answer 1

I wasn't running a local server. 我没有在本地服务器上运行。 I found a good article for doing it: https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server 我找到了一篇很好的文章： https : //developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server

无法将json数据加载到D3.JS中

问题描述

1 个解决方案

解决方案1
0 2018-10-20 13:30:32

无法将json数据加载到D3.JS中

问题描述

1 个解决方案

解决方案1 0 2018-10-20 13:30:32

解决方案1
0 2018-10-20 13:30:32