javascript - D3抽象enter()方法

Question

使用 D3.js，我尝试将输入方法抽象为一个函数，该函数确定这是否是我们第一次需要输入。有人可以指出为什么这不起作用吗？

  var firstRender = 0;

  svg.append("g")
    .attr("id", "circles")
    .selectAll("circle")
    .data(data)
    .call(enterStage)  //continue chaining other D3 methods after this is ran
    .append("circle")
    .attr("cx", function(d) {
      return xScale(d[0]);
    })
    .attr("cy", function(d) {
      return yScale(d[1]);
    })
    .attr("r", 2);


  function enterStage() {
    if (firstRender < 1) {
      firstRender++;
      return this.enter();
    } else {
      return this;
    }
  }

Answer 1

您不需要包装器，您可以简单地对所有选择进行操作:

var sel = svg.selectAll("g.circles").data([1]); // dummy data for top-level element
sel.enter().append("g")
  .attr("id", "circles");

var circleSel = sel.selectAll("circle").data(data);
circleSel.enter().append("circle");
circleSel.attr("cx", function(d) {
    return xScale(d[0]);
  })
  .attr("cy", function(d) {
    return yScale(d[1]);
  })
  .attr("r", 2);

即使是第一次，这也能正常工作，因为当您追加元素时，输入选择会合并到更新选择中。