2017-07-06 14 views
-1

私は午前中ですD3グラフをプロットしている間に対象エラーが発生しました。私がconsole.logを実行すると、配列が見えるので、データが正しくロードされています。未知型エラー:d3.select(...)。selectAll(...)。data(...)。enter(...)。append(...)。atrrが関数ではない

Javascriptを:

d3.csv("../../shot_logs.csv", function (data) { 

    var shots = d3.select("svg") 
     .selectAll("g") 
     .data(data) 
     .enter() 
     .append("g") 
      .atrr("class", "shot") 
      .attr("transform", function (d) { 
        return "translate(" + d.x_coodinates + "," + d.y_coordinates + ")"; 
    }); 
    shots.append("circle") 
     .attr("r", 5); 

}); 

HTML:

<!DOCTYPE html> 
<html lang="en-US"> 

<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="style-main.css" type="text/css" media="all"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://d3js.org/d3.v4.min.js"></script> 
</head> 

<body> 
    <h1>D3 Charts</h1> 
    <select id="selector"></select> 
    <svg id="canvas" height="600px" width="1200px"></svg> 

    <script src="JS/script.js"></script> 
</body> 

</html> 
+0

エラーはあなたが知る必要があるすべてを言っています。 Console.logオブジェクトを追加した後、実際にそのオブジェクトにattr関数があるかどうかを確認してください。 – Volem

+0

連鎖が多いと、それは読めなくなります。 – Volem

答えて

0

は、単純なタイプミス:)

の変更のように見える

.atrr("class", "shot") 

.attr("class", "shot") 
+0

あなたはワシの目を持っています。問題を解決しました。私は今日はそんなに愚かではなかったと思う:) – Hannan

関連する問題