D3 divgrid.js mit JSON-Daten

Ich habe eine Datenquelle, die ich in CSV umwandeln kann, um damit ein Gitter erstellen zu können.D3 divgrid.js mit JSON-Daten

Die Daten sind wie folgt:

{ 
"Name": "Emily", 
"Age": "10" 
}

Wenn ich es konvertieren kann ich sehen, dass die Daten wie folgt angezeigt:

Name,Age 
"Emily","10"

Aber wenn ich die html laufen bekomme ich die Ausgabe wie folgt :

0 
N 
a 
m 
e 
, 
A 
g 
e 
" 
E 
m 
i 
l 
y 
" 
, 
" 
1 
0 
"

der Code ich verwende ist die folgende:

<!DOCTYPE html> 
<body> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script src="divgrid.js"></script> 
<script> 
    var notas = [ 
    { 
    "Name": "Emily", 
    "Age": "10" 
    }]; 
    const replacer = (key, value) => value === null ? '' : value 
    const header = Object.keys(notas[0]) 
    let csv = notas.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(',')) 
    csv.unshift(header.join(',')) 
    csv = csv.join('\r\n') 
    console.log(csv) 
    var grid = d3.divgrid(); 
    d3.select('body') 
     .datum(csv) 
     .call(grid); 
</script> 
</body> 
</html>

Irgendwelche Ideen, was ich falsch mache?

Dank

Quelle

2017-01-16 Selrac

I "divgrid" nehmen ist von here?

Wenn ja, Sie brauchen nicht CSV-Daten, Sie brauchen Ihre Daten wie Sie bereits haben. Im verknüpften Beispiel konvertiert csv-Daten in das Format, das Sie bereits haben. eine Reihe von Objekten!

Voll Beispiel:

<!DOCTYPE html> 
 

 
<head> 
 
    <style> 
 
    <style type="text/css"> html, 
 
    body { 
 
     background: #f7f7f7; 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     color: #111; 
 
     font-family: Ubuntu, Helvetica, sans-serif; 
 
     font-size: 12px; 
 
     line-height: 1.35em; 
 
    } 
 
    
 
    a { 
 
     color: #6be; 
 
     text-decoration: none; 
 
    } 
 
    
 
    .row, 
 
    .header, 
 
    .cell { 
 
     height: 18px; 
 
    } 
 
    
 
    .row, 
 
    .header { 
 
     clear: left; 
 
    } 
 
    
 
    .header { 
 
     font-weight: bold; 
 
    } 
 
    
 
    .cell { 
 
     float: left; 
 
     overflow: hidden; 
 
     white-space: nowrap; 
 
     width: 100px; 
 
    } 
 
    
 
    .col-0 { 
 
     width: 180px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <script src="http://d3js.org/d3.v3.min.js"></script> 
 
    <script src="http://bl.ocks.org/syntagmatic/raw/3687826/ccc6c63b6f6df611930c8fd6d3ddf5daebe0ddf2/divgrid.js"></script> 
 
    <script> 
 
    var notas = [{ 
 
     "Name": "Emily", 
 
     "Age": "10" 
 
    }]; 
 
    var grid = d3.divgrid(); 
 
    d3.select('body') 
 
     .datum(notas) 
 
     .call(grid); 
 
    </script> 
 
</body> 
 

 
</html>

Quelle

2017-01-17 00:24:38 Mark

Dank Mark. Wow, ich habe nicht erwartet, dass der CSS-Code die Tabelle formatiert. – Selrac

D3 divgrid.js mit JSON-Daten

Antwort

Verwandte Themen