無法將json數據加載到D3.JS中

Question

我在幾年前就已經看到了解決方案，但是我知道它們已經過時了，D3發生了一些變化。 我是D3.JS的初學者，所以我想通過玩它來更好地理解它。

我在與D3文件相同的文件夾中有一個名為mydata.json的json文件。 json文件的外觀是...

[

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

]

整個文件以及腳本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>

我無法用我的代碼發現錯誤，並且沒有出現基本圖形，有人有任何建議嗎？

額外！

我確實添加了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

我沒有在本地服務器上運行。 我找到了一篇很好的文章： 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