it-swarm.com.de

d3 csv daten werden geladen

Ich versuche, ein einfaches Scatterplot-Programm in D3 so anzupassen, dass eine CSV-Datei akzeptiert wird. Wenn ich die Daten in der Datei verwende, funktioniert das einwandfrei, aber wenn ich versuche, die CSV-Datei zu laden, funktioniert es einfach nicht. Gibt es etwas, was ich vermisse? Der Inhalt der CSV-Datei "datatest.csv" stimmt mit der Datenmenge im Code überein. Ich habe überprüft, dass der Browser die Daten lädt, und es scheint, dass alle vorhanden sind. Ich vermute, ich vermisse einfach einen Schritt. 

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

Dies ist der Inhalt der CSV-Datei:

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
17
English Grad

WICHTIG:

Während die Antwort hier funktioniert, gibt es eine eingebaute Methode d3.csv.parseRows(), die dasselbe Ergebnis erzielt. Siehe dazu die Antwort von @ryanmt (auch auf dieser Seite). Beachten Sie jedoch, dass unabhängig von der von Ihnen verwendeten Methode, wenn Ihr CSV Nummern enthält, diese von Zeichenfolgen in Javascript-Nummern konvertiert werden müssen. Sie können dies tun, indem Sie den geparsten Werten einen + voranstellen. In der hier vorgestellten Lösung, die parseRows() nicht verwendet, wird diese Konvertierung beispielsweise über +d["x-coordinate"] durchgeführt.

DIE ANTWORT:

Der CSV-Parser erzeugt ein Array von Objekten und nicht das Array von Arrays, das Sie benötigen. Es sieht aus wie das:

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

Um es zu transformieren, müssen Sie eine map()-Funktion verwenden:

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

(Hinweis: map() ist in älteren IE nicht verfügbar. Wenn das wichtig ist, gibt es viele Problemumgehungen mit d3, jQuery usw.)

15
meetamit

D3 bietet genau dafür eine Möglichkeit.

Anstatt .parse() für Ihre Daten aufzurufen, rufen Sie .parseRows auf. Dadurch werden nur die Daten als Array und nicht als Objekt (basierend auf der Kopfzeile) bereitgestellt.

siehe die Dokumentation .

7
Ryanmt

Verwendung von d3.csvParseRows (vorausgesetzt, D3 v5)

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