Javascript 我可以在d3中表示层次结构而不嵌套DOM元素吗？_Javascript_D3.js

Javascript 我可以在d3中表示层次结构而不嵌套DOM元素吗？

javascript d3.js

Javascript 我可以在d3中表示层次结构而不嵌套DOM元素吗？,javascript,d3.js,Javascript,D3.js,我在d3中看到的所有表示分层数据的示例都涉及嵌套元素：例如，div中的div，或表行中的表单元格在生成的DOM元素是同级的情况下，显示分层数据的“正确”方式是什么？例如，不同级别的标题（h1、h2等）我的第一次尝试（）获取以下数据： var数据=[{ “密钥”：“1”， “价值观”：[{ “密钥”：“101”， “标题”：“第1.A分节” }, { “密钥”：“102”， “标题”：“第1.B分节” }, { “钥匙”：“103”， “标题”：“第1.C分节” } ], “标题”：“第1节”

我在d3中看到的所有表示分层数据的示例都涉及嵌套元素：例如，div中的div，或表行中的表单元格

在生成的DOM元素是同级的情况下，显示分层数据的“正确”方式是什么？例如，不同级别的标题（h1、h2等）

我的第一次尝试（）获取以下数据：

var数据=[{
“密钥”：“1”，
“价值观”：[{
“密钥”：“101”，
“标题”：“第1.A分节”
}, {
“密钥”：“102”，
“标题”：“第1.B分节”
}, {
“钥匙”：“103”，
“标题”：“第1.C分节”
}
],
“标题”：“第1节”
}, {
“密钥”：“2”，
“价值观”：[{
“键”：“201”，
“标题”：“第2.A分节”
}, {
“密钥”：“202”，
“标题”：“第2.B小节”
}, {
“密钥”：“203”，
“标题”：“第2.C分节”
}
],
“标题”：“第2节”
}]

。。。并尝试使用标准示例将其转换为标题和副标题，假设我们正在嵌套元素，如下所示：

d3.选择（“主体”）.选择全部（“h1”）
.数据（数据）
.输入（）
.附加（“h1”）
.text（函数（d）{return d.title}）
.全选（“h2”）
.data（函数（d）{返回d.values}）
.输入（）
.附加（“h2”）
.text（函数（d）{return d.title}）

当然，我最终得到的是嵌套元素，这不是我想要的：

第1节
第1.A分节
第1.B分节
第1.C分节
第二节
第2.A分节
第2.B分节
第2.C分节

我怎样才能取而代之呢

第1节
第1.A分节
第1.B分节
第1.C分节
第二节
第2.A分节
第2.B分节
第2.C分节

好的，我在发布问题的过程中发现了这一点。解决方案是继续进行嵌套操作，但将数据附加到包含div的文件中；然后将标题添加到每个div

var level1=d3.选择（“主体”）
.全选（“第1级”）
.数据（数据）
.输入（）
.append（“div”）.attr（“类”、“级别1”）
level1.append（“h1”）.text（函数（d）{return d.title}）
变量级别2=级别1。选择全部（“div.level2”）
.data（函数（d）{返回d.values}）
.输入（）
.append（“div”）.attr（“class”，“Level2”）
level2.append（“h2”）.text（函数（d）{return d.title}）

这为我提供了以下标记：


第一节
第1.A分节
第1.B分节
第1.C分节
第二节
第2.A分节
第2.B分节
第2.C分节

此处的工作示例：

更新：我同意@Lars的观点，这不是一个很好的解决方案。事实上，它并没有真正解决我实际遇到的问题，这涉及到每个节点添加一个表行：没有任何元素可以嵌套并用于在表中包装

tr

s。所以我欢迎一个不涉及包装器元素的更干净的解决方案

[d3.js]相关文章推荐

随机文章推荐