我正在 d3.js 中制作树形图，我需要它附加标签，其中包含动态 html，从 JSON 中的多个节点获取数据。这是我想做的基本附加:
childBody.append('p').attr("class", "label")
.html(function(d) {
return d.name + "<span>" + d.size + "</span>";
});
但是当我这样做时，仅附加 d.name(p 标签，没有跨度)，换句话说:
<body class="labelbody"><p class="label">[d.name]</p></body>
这是我发现的附加多个项目的唯一方法，但它不是嵌套的，因此大小不在“标签”
标记内，因此无法正确显示。
childBody.append('p').attr("class", "label")
.text(function(d) {
return d.name;
});
childBody.append('p').text(function(d) {
return d.size;
});
结果:
<body class="labelbody"><p class="label">jQuery</p><p>90</p></body>
我正在改编我的示例
http://www.billdwhite.com/wordpress/wp-content/js/treemap_headers_03.html
最佳答案
您需要保留对 p 标记的引用，以便可以附加到它，而不是附加其他一些 p 标记。
var p = childBody.append('p').attr("class", "label").text(function(d) {
return d.name;
});
p.append('span').text(function(d) {
return d.size;
});
或者您可以通过以下方式一次性完成
childBody.append('p').attr("class", "label").text(function(d) {
return d.name;
}).append('span').text(function(d) {
return d.size;
});
关于javascript - d3.js 在追加时不返回动态构造的 html 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37797884/