D3 divgrid.js with json data

グリッドを作成するためにCSVに変換するデータソースがあります。D3 divgrid.js with json data

次のようにデータがある：

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

私は次のようにデータが表示されていることを見ることができ、それを変換します

Name,Age 
"Emily","10"

しかし、私は、HTMLを実行すると、以下のように、私は出力を得ます：

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

私が使用しているコードは次のとおりです。

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

私が間違っていることに関するアイデアはありますか？

おかげ

出典

2017-01-16 Selrac

私は "divgridは" hereからであると仮定しますか？

csvデータが必要ない場合は、すでにデータがあるようなデータが必要です。リンクされた例では、d3.csvはcsvデータをあなたがすでに持っているフォーマットに変換しています。オブジェクトの配列！

全例：

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

出典

2017-01-17 00:24:38 Mark

おかげマーク。うわー、私はCSSコードがテーブルをフォーマットすることを期待していませんでした。 – Selrac

D3 divgrid.js with json data

答えて

関連する問題