我编写了下面的代码,并从在线教程中获取了大部分内容。
<!DOCTYPE HTML>
<html>
<head>
<title>D3</title>
<script src = "https://d3js.org/d3.v4.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body>
<script>
d3.csv("CSV_Data\2006_Sport-in-Bayern - Men.csv", function(data) {
var width = 1000;
var height = 1000;
var canvas = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(200, 100)");
canvas.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", 25)
.attr("height", function (d) {return d.bis_5_Jahre * 10; })
.attr("x", function (d, i) {return i * 30; })
.attr("fill", "blue")
})
</script>
</body>
</html>
类似问题的一些答案暗示输入错误或未将数据放在.enter
之前或csv文件中缺少逗号。在我的情况下,不是那些是错误的。我似乎无法找到导致此错误的原因。
编辑:这是创建的Plunker的链接: https://plnkr.co/edit/iWBymzvCTUMj8LN7xhDV?p=preview
一些CSV行:
Sportart;bis_5_Jahre;6_13;14 - 17;18 - 26;27 - 40;41 - 60;ab 61 Jahre
Aikido;90;1254;443;484;1065;955;115
American Football;7;205;696;1391;1058;271;19
Badminton;62;2121;2144;2575;4650;4961;550
Base- u. Softball;92;602;409;476;706;217;30
Basketball;170;6430;6321;6577;4291;3412;589
...