我对 Javascript 和 D3 都很陌生，我一直在尝试自己尝试网站上的示例。
我将以下内容用于 JS/HTML 代码:
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
</style>
<head>
<body>
<script>
d3.json("mydata.json", 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 * 10; })
.attr("y", function (d, i) { return i * 50; })
.attr("fill", "blue")
})
</script>
</body>
</html>
对于我的“mydata.json”，我正在使用:
[
{"name": "Maria", "age": 30},
{"name": "Fred", "age": 50},
{"name": "Jason", "age": 12}
]
每次我尝试运行它时，它的结果都与 d3 示例页面上的示例不同。请帮助，我正在尝试弄清楚 d3 是如何工作的，我是一个新手程序员。
最佳答案
看来您必须设置 height 属性才能显示某些内容。
调试此类问题的一个好方法是首先在没有 json 调用的情况下使一切正常。为此，我建议您使用 chrome javascript 控制台显示错误，并使用 chrome 检查器查看 html 代码。
data = [{
"name": "Maria",
"age": 30
}, {
"name": "Fred",
"age": 50
}, {
"name": "Jason",
"age": 12
}]
//d3.json("mydata.json", 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 * 10;
})
.attr("height", "20px")
.attr("y", function (d, i) {
return i * 50;
})
.attr("fill", "blue")
//})
关于javascript - d3.json 有问题，不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18933372/