d3.js没有在append上返回动态构造的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标签，没有span），换句话说：

<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

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没有在append上返回动态构造的html元素

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-06-13 20:52:49

d3.js没有在append上返回动态构造的html元素

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-06-13 20:52:49

解决方案1
0 已采纳 2016-06-13 20:52:49