Question

作为通用更新模式的一部分，是否有更好的习惯用法将<svg:g>组合的元素附加到enter()选择的容器中？

var cell = d3.select(this); // parent container

cell = cell
  .selectAll('.plot').data([0]);   // seems kludgy

cell
  .enter().append('g').classed('plot',true);  // append the wrapping <g> element

cell = cell
  .selectAll("circle")
  .data(_.values(slice));

cell
  .enter().append("circle"); // general enter() -- create plot elements

cell.attr() // etc.  general update--style plot elements

cell
  .exit().remove();

当然，

if ( cell.select('g.plot').empty() ) {
  cell = cell.append('g').classed('plot', true);
}

而不是前两个语句也会这样做，但这似乎是一个非常常见的操作而selectAll().data([0])似乎是做作的 - 是否有更优雅的d3成语？

Answer 1

如果需要创建一个元素或者另外选择它，我通常会使用类似于if块的结构，而不是使用无意义数据的数据连接。

它不仅代码更短，而且意味着当您的元素没有任何意义时，您不会在元素上携带额外的数据属性。其他人也更容易弄清楚你在做什么！

我唯一要改变的是实际保存您在.empty()测试中使用的选择，因为如果它不为空，那么你就是＆＃39 ;将使用它。（你可以使用另一个变量来保存这个选项，但是d3.select(this)并不是一个重复的高计算方法调用，即使这样，你只需要重复一次，当你第一次创建组。）

var plot = d3.select(this) // this is the parent container
             .selectAll('g.plot'); //select the plot group if it exists

if ( plot.empty() ) 
    plot = d3.select(this).append('g').classed('plot',true);
           //create the plot group if necessary

var cell = plot.selectAll("circle") //now select/create data elements as usual
  .data(_.values(slice));

cell
  .enter().append("circle"); // general enter() -- create plot elements

cell.attr() // etc.  general update--style plot elements

cell
  .exit().remove();

Answer 2

只需为您需要的每组新元素添加“g”。

var cell = d3.select(this)
  .append("g")
    .attr("class","plot")
    .selectAll("circle")
    .data(…);

cell.enter().append("circle")
    .attr(…);

cell.exit().remove();

什么在这里不起作用？

d3用于在enter（）上附加分组元素的习语？

2 个答案: