d3.js 不在追加时返回动态构造的 html 元素

Question

我正在 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>

这是我找到的唯一追加多个项目的方法，但它不是嵌套的，所以大小不在 "label"

标签内，所以无法正常显示.

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

Answer 1

您需要保留对 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;
});

d3.js 不在追加时返回动态构造的 html 元素

d3.js not returning a dynamically constructed html element on append

javascript

svg

data-visualization

d3.js