D3js如何在“.enter”上下文中同时添加两个同级子元素

Question

我在尝试将一个圆形和文本放在同一级别的组内（不是相互嵌套）时遇到了问题，在.enter()的上下文中。

var categorized = g1.selectAll("g.node").data(dataset, function(d){return d.id})

categorized
.enter()
    .append("g")
    .attr("id", function(d,i){return d.id;});

categorized
.enter().append("circle")
    .style("fill", "#ddd");
// throws an error

categorized
.append('text')
    .text(function(d,i){return d.count});
// this is working but is an update so I have to remove the text on exit

有没有办法回到父级，类似于这样：

categorized
.enter()
.append("g")
.append("circle")
.getBackToParent // the g
.append("text");

- mikmikmik

Answer 1

只需将父级d3包装器分配给一个变量：

var g = categorized.enter().append("g");
g.append("circle").style("fill", "#ddd");
g.append("text").text(function(d,i){return d.count});

- Felix Kling

---

谢谢。它起作用了。我之前有一个数据绑定问题，虽然使用带有输入上下文的 var 是问题的一部分，但实际上并不是。 - mikmikmik

这在 svg 中非常有用。但是在 html 中怎么样呢？例如交替使用 <dt> 和 <dd> 标签? - leonard vertighel

@leonardvertighel：不太确定你的意思，你可能需要提出一个新问题。 - Felix Kling

谢谢，我在这里问了一个问题：https://dev59.com/tIDba4cB1Zd3GeqPEXX5 ：基本上我想创建一个交替节点列表<dt>key</dt><dd>value</dd><dt>key</dt><dd>value</dd>...没有包装元素。 - leonard vertighel

这很惊人，但我希望还有其他可能的方式。 - Alper