D3 divgrid.js与json数据

2017-01-16 49 views 0 likes

我有一个数据源，我正在转换为CSV以便能够使用它来创建网格。D3 divgrid.js与json数据

的数据如下：

{ 
"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与json数据

回答

相关问题