d3 caricamento dati csv

Sto cercando di adattare un semplice programma scatterplot in D3 per accettare un file CSV. Quando uso i dati nel file funziona perfettamente, ma quando provo a caricare il file CSV semplicemente non funzionerà. C'è qualcosa di semplice che mi manca? I contenuti del file CSV "datatest.csv" sono gli stessi del set di dati nel codice. Ho controllato che il browser stia caricando i dati e sembra che ci sia tutto. Immagino che mi manchi semplicemente un passaggio.d3 caricamento dati 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>

Questo è il contenuto del file 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

fonte

2013-02-20 English Grad

IMPORTANTE:

Mentre la risposta qui funziona, c'è un metodo integrato d3.csv.parseRows(), che ottiene lo stesso risultato. Per quello, vedi la risposta di @ ryanmt (anche in questa pagina). Tuttavia, tieni presente che indipendentemente dal metodo che utilizzi, se il tuo CSV contiene numeri, dovrai convertirli da stringhe a numeri javascript. Puoi farlo aggiungendo il prefisso ai valori analizzati con un +. Ad esempio, nella soluzione che ho fornito qui, che non utilizza parseRows(), la conversione viene eseguita tramite +d["x-coordinate"].

la risposta:

Il parser CSV produce un array di oggetti, piuttosto che l'array di array di cui avete bisogno. Ecco come si presenta:

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

per trasformarla, è necessario utilizzare una funzione map():

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

(Nota, map() non è disponibile in più vecchio IE se quello che conta, poi ci sono un sacco. di soluzioni alternative con d3, jQuery, ecc.)

fonte

2013-02-20 18:05:36 meetamit

Nel file csv ho le informazioni nel set di dati impostato come elenco separato da virgole. ogni array nel set di dati ha la propria riga nel file esterno. Il file CSV è configurato correttamente, non riesco a capire come ottenere correttamente le informazioni dal file –

@EnglishGrad La prima riga del tuo CSV ha nomi di colonne? Il parser csv di d3 presuppone che i valori di questa prima riga corrispondano ai nomi di proprietà. Utilizza questi nomi di proprietà per produrre una matrice di oggetti, non di array. Basandomi sulla mia comprensione di ciò che stai descrivendo, non c'è modo che funzionerà nel modo in cui lo hai. Prova 'console.log''ingando i dati e vedi cosa ottieni. – meetamit

Meetamit, grazie per l'aiuto. Ho postato i contenuti del file CSV sopra –

D3 fornisce un incorporato proprio per questo.

Invece di chiamare .parse() sui dati, chiamare .parseRows. Questo fornisce solo i dati come una matrice, piuttosto che un oggetto (basato sulla riga dell'intestazione).

vedere Documentation.

fonte

2014-02-21 18:03:20 Ryanmt

Puoi dare un esempio di come funziona con '.parseRows'? Grazie! –

d3 caricamento dati csv

risposta

Problemi correlati