如何关闭并稍后在 D3.JS 中添加 HTML 元素？

Question

现在我有了下一个代码：

d3.select("#commiterStatsContainer")
        .append("div").attr("class", "chip")
        .append("img").attr("src", committers[i].avatar)
        .text(committers[i].login);

但它会将我的文本添加到 <img>...</img> 标记内。如何关闭 <img> 并稍后添加我的文本？

Answer 1

append 方法返回一个包含附加元素的新选择 (See documentation)。所以按照你的代码：

d3.select("#commiterStatsContainer") // initial selection
  .append("div").attr("class", "chip") // new selection with a div
  .append("img").attr("src", committers[i].avatar) // new selection of img in that div
  .text(committers[i].login); // text for the img tag in the div.

请尝试：

var div = d3.select("#commiterStatsContainer")
  .append("div").attr("...");

div.append("img").attr("....");
div.append("p").html("....");

变量div 是新创建的div 的选择，然后您可以使用div.append() 将新元素附加到该div。