Javascript 使用D3创建表_Javascript_D3.js

Javascript 使用D3创建表

javascript d3.js

Javascript 使用D3创建表,javascript,d3.js,Javascript,D3.js,我试图在D3中创建一个用新数据更新的表。这主要是有效的不知何故，我在新添加的行中没有得到任何列（因此最初表是空的）我做错了什么见：在D3中，选择是不可变的。因此，当你这样做的时候 rows.enter().append("tr") 。。。您没有更改行是什么：它一直是一个更新选择，当函数第一次运行时，它是空的。所以，当你来到 var cells = rows.selectAll("td") 。。。没有可附加s的s 尽管如此，您必须更改行的内容：

我试图在D3中创建一个用新数据更新的表。这主要是有效的

不知何故，我在新添加的行中没有得到任何列（因此最初表是空的）

我做错了什么

见：

在D3中，选择是不可变的。因此，当你这样做的时候

rows.enter().append("tr")

。。。您没有更改

行

是什么：它一直是一个更新选择，当函数第一次运行时，它是空的。所以，当你来到

var cells = rows.selectAll("td")

。。。没有可附加

s的

尽管如此，您必须更改

行

的内容：

rows = rows.enter().append("tr").merge(rows);

现在，

行

包含输入的元素

以下是更改后的代码：

var数据1=[{
“姓名”：“史蒂夫”，
“年龄”：“34”
},
{
“姓名”：“布赖恩”，
“年龄”：“44”
},
{
“姓名”：“艾米”，
“年龄”：“45”
}
];
变量数据2=[{
“姓名”：“詹妮弗”，
“年龄”：“54”，
“成人”：“否”
},
{
“姓名”：“迈克”，
“年龄”：“14岁”，
“花”：“是的”
}
];
var-toggle=true；
函数更新（）{
如果（切换）{
可更新（数据1）；
}否则{
可更新（数据2）；
}
切换=！切换；
}
var tableBody=d3.选择（“#tableBody”）；
更新（）；
函数updateTable（数据）{
var rows=tableBody.selectAll（“tr”）.data（数据）；
rows.exit（）.remove（）；
行=行。回车（）.append（“tr”）.merge（行）；
变量单元格=行。选择全部（“td”）
.数据（功能（d，i）{
返回Object.value（d）；
});
cells.exit（）.remove（）；
cells.enter（）.append（“td”）
.文本（功能（d）{
返回d；
});
单元格.文本（函数（d）{
返回d；
});
}

td{
边框：2倍纯绿；
}
th{
边框：2倍纯红；
}
tr{
边框：2件纯蓝；
显示：块；
填充：3倍；
保证金：2倍；
}



此按钮在两个数据集之间切换：

切换
第1列
第2列
第3列