Question

当浏览器尝试呈现以下代码及其json文件时，我得到一个空白屏幕。 Safari和Chrome都有。似乎它在画布中呈现SVG而不是其余部分。我错过了结构中的东西吗？或者应该在服务器上运行？

<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script>
// load the external data from built-in method in D3
   d3.json("datastuff.json", function(data) {

   // after data load then...
    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 * 10; })
       .attr("height", 50)
       .attr("y", function (d,i) {return  i * 50; })
       .attr("fill", "blue")

    })


</script>


</body>
</html>

这是它关联的外部datastuff.json文件。

[
{“name”:”Maria”,”age”:30},
{“name”:”Fred”,”age”:50},
{“name”:”Francis”,”age”:12}
]

在条形图中遇到D3渲染问题

0 个答案: