Question

几年前，我已经看到了解决方案，但是我知道它们已经过时了，D3有所改变。我是D3.JS的初学者，所以我想通过玩它来更好地理解它。

我在与D3文件相同的文件夹中有一个名为mydata.json的json文件。 json文件的外观是...

**else {
    para.textContent = num + ' squared is ' + squared(num) + '. ' +
    num + ' cubed is ' + cubed(num) + '. ' +
    num + ' factorial is ' + factorial(num) + '.';
      }**

整个文件以及脚本D3文件的外观是...

[

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

]

我无法在代码中发现错误，并且没有出现基本图形，有人有任何建议吗？

额外！

我确实添加了console.log（data）来查看发生了什么，并且确实得到了以下错误消息：

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

Answer 1

我没有运行本地服务器。我找到了一篇很好的文章： https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server

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

1 个答案: