0
我做了一个图并使用json发送它。现在我需要将图形的所有类型,id和名称属性放入一个表格中,当新数据出现时可以更新。代码是:从json制表d3图形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script>
var json = [{"multigraph": false, "directed": true, "links":
[{"source": 2, "target": 0}, {"source": 2, "target": 1}, {"source": 2, "target": 3}, {"source": 2, "target": 4}],
"graph": {}, "nodes":
[{"id": "'(clear d)', '(ontable b)', '(ontable d)', '(ontable c)', '(clear b)', '(holding a)', '(clear c)'",
"name": "'(clear d)', '(ontable b)', '(ontable d)', '(ontable c)', '(clear b)', '(holding a)', '(clear c)'",
"type": "search_node"},
{"id": "'(ontable a)', '(clear a)', '(clear d)', '(ontable c)', '(ontable d)', '(clear c)', '(holding b)'",
"name": "'(ontable a)', '(clear a)', '(clear d)', '(ontable c)', '(ontable d)', '(clear c)', '(holding b)'",
"type": "search_node"},
{"id": "'(ontable a)', '(clear a)', '(ontable b)', '(clear d)', '(ontable d)', '(handempty)', '(ontable c)', '(clear c)', '(clear b)'",
"name": "'(ontable a)', '(clear a)', '(ontable b)', '(clear d)', '(ontable d)', '(handempty)', '(ontable c)', '(clear c)', '(clear b)'",
"type": "search_node"},
{"id": "'(ontable a)', '(clear a)', '(ontable b)', '(holding d)', '(ontable c)', '(clear b)', '(clear c)'",
"name": "'(ontable a)', '(clear a)', '(ontable b)', '(holding d)', '(ontable c)', '(clear b)', '(clear c)'",
"type": "search_node"},
{"id": "'(ontable a)', '(clear a)', '(clear d)', '(ontable b)', '(ontable d)', '(holding c)', '(clear b)'",
"name": "'(ontable a)', '(clear a)', '(clear d)', '(ontable b)', '(ontable d)', '(holding c)', '(clear b)'",
"type": "search_node"}]}]
d3.json(json, function (error,data) {
function tabulate(data, columns) {
var table = d3.select('body').append('table')
var thead = table.append('thead')
var tbody = table.append('tbody');
// append the header row
thead.append('tr')
.selectAll('th')
.data(columns).enter()
.append('th')
.text(function (column) { return column; });
// create a row for each object in the data
var rows = tbody.selectAll('tr')
.data(data)
.enter()
.append('tr');
// create a cell in each row for each column
var cells = rows.selectAll('td')
.data(function (row) {
return columns.map(function (column) {
return {column: column, value: row[column]};
});
})
.enter()
.append('td')
.text(function (d) { return d.value; });
return table;
}
// render the table(s)
tabulate(data, ['type', 'id', 'name']);
});
</script>
</body>
</html>
标题出现,但没有信息显示在它们下面。我认为问题是在json文件中添加了额外的标签。我如何将json文件中的所有信息提供给表格?
但它一直只显示第二个节点。不是所有的节点 – Noobanswerisnotananswer
的单元格描述都需要如下所示:'var cells = rows.selectAll(“td”) .data(function(row){ return columns.map(function(column){ return {column:column, (“style”,“font-family:Courier”)//设置字体样式(“style”,“font-family:Courier”); //设置字体样式(函数(d){return d.value;});' – Noobanswerisnotananswer
https://jsfiddle.net/4b35qkg2/3/是的!从这里http://bl.ocks.org/d3noob/473f0cf66196a008cf99 – mkaran