javascript - 如何关闭并稍后在 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。