TypeError:canvas.selectAll(...)。data(...)。enter不是函数

时间:2017-07-09 01:00:16

标签: javascript html d3.js

我编写了下面的代码,并从在线教程中获取了大部分内容。

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

0 个答案:

没有答案