web-dev-qa-db-ja.com

d3 csvデータの読み込み

D3の単純な散布図プログラムをCSVファイルを受け入れるように適合させようとしています。ファイル内のデータを使用すると問題なく動作しますが、CSVファイルを読み込もうとすると、単に動作しません。私が見逃している簡単なものはありますか？ CSVファイル「datatest.csv」の内容は、コード内のデータセットと同じです。ブラウザがデータをロードしていることを確認しましたが、すべてそこにあるようです。私は単に足りないだけだと思っています。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>D3 Demo: Linear scales</title>
    <script type="text/javascript" src="../d3/d3.v3.js"></script>
    <style type="text/css">
        /* No style rules here yet */       
    </style>
</head>
<body>
    <script type="text/javascript">

        //Width and height
        var w = 900;
        var h = 500;
        var padding = 20;
        var dataset = [];

//          var dataset = [
//                          [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
//                          [410, 12], [475, 44], [25, 67], [85, 21], [220, 88],
//                          [600, 150]
//                        ];

        d3.csv("datatest.csv", function(data) {
        dataset=data
        });



        //Create scale functions
        var xScale = d3.scale.linear()
                             .domain([0, d3.max(dataset, function(d) { return d[0]; })])
                             .range([padding, w - padding * 2]);

        var yScale = d3.scale.linear()
                             .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                             .range([h - padding, padding]);

        var rScale = d3.scale.linear()
                             .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                             .range([2, 5]);

        //Create SVG element
        var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);

        svg.selectAll("circle")
           .data(dataset)
           .enter()
           .append("circle")
           .attr("cx", function(d) {
                return xScale(d[0]);
           })
           .attr("cy", function(d) {
                return yScale(d[1]);
           })
           .attr("r", function(d) {
                return rScale(d[1]);
           });
    </script>
</body>
</html>

これはCSVファイルの内容です。

x-coordinate, y-coordinate
5,20
480,90
250,50
100,33
330,95
410,12
475,44
25,67
85,21
220,88
600,150
javascripthtmlcsvd3.js
17
English Grad

重要：

ここでの答えは機能しますが、同じ結果を達成する組み込みメソッドd3.csv.parseRows()があります。それについては、@ ryanmtの回答（このページも参照）を参照してください。ただし、使用する方法に関係なく、CSVに数字が含まれている場合は、文字列からJavaScript番号に変換する必要があることに注意してください。解析された値の前に_+_を付けることでそれを行うことができます。たとえば、ここで提供したソリューション（parseRows()を使用しないソリューション）では、_+d["x-coordinate"]_を介して変換が実現されます。

回答：

CSVパーサーは、必要な配列の配列ではなく、オブジェクトの配列を生成します。次のようになります。

_[
  {"x-coordinate":"5"," y-coordinate":"20"},
  {"x-coordinate":"480"," y-coordinate":"90"},
  {"x-coordinate":"250"," y-coordinate":"50"},
  {"x-coordinate":"100"," y-coordinate":"33"},
  ...
]
_

変換するには、map()関数を使用する必要があります。

_d3.csv("datatest.csv", function(data) {
  dataset = data.map(function(d) { return [ +d["x-coordinate"], +d["y-coordinate"] ]; });
});
_

（注：map()は古いIEでは使用できません。それが重要な場合は、d3、jQueryなどで多くの回避策があります）

15
meetamit

D3は、まさにこのための組み込み機能を提供します。

データで.parse()を呼び出す代わりに、.parseRows。これにより、（ヘッダー行に基づいて）オブジェクトではなく配列としてデータのみが提供されます。

ドキュメント を参照してください。

7
Ryanmt

D3.csvParseRowsの使用（D3 v5を想定）

d3.text('/data/output.csv')
  .then( text => d3.csvParseRows(text) )
  .then( d => console.log(d) );
0
Garfield