D3 abstract enter（）方法

Question

使用D3.js，我試圖將我的enter方法抽象爲一個函數，該函數確定這是否是我們第一次需要輸入。有人能指出爲什麼這不起作用嗎？

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

這將正常工作，甚至在第一時間爲進入選擇合併到更新的選擇，當你追加元素。