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);

即使第一次这样也可以正常工作，因为当您追加元素时，回车选择会合并到更新选择中。

D3抽象enter（）方法

1 个答案: