D3.js：「在飛行中」向數組添加元素不會刷新svg圖形

Question

我喜歡在任何給定時間有6個氣泡的氣泡行。該數組有6個json對象。該代碼僅顯示加載時首先添加的圓圈。但是，當我修改數組時，我想刪除第一個氣泡並將一個氣泡添加到該行的右端。我正在使用setInterval在數組中插入一個元素來測試它。由於我正在記錄數組的狀態，所以數組正在改變，但svg圖形沒有刷新。我只是不知道問題是重新使用createElementGroup（）還是在這種情況下如何刪除節點（我發現常見的情況是使用exit（）d3方法，但我不確定在哪裏實現它這個特殊情況）。

此外，當我刪除並添加一個元素時，我應該在哪裏放置過渡使其平滑？在現場演示是在這裏：

http://codepen.io/juanf03/pen/BQyYBq（您可以在泡沫點擊查看它擴大和顯示的數據，這樣我檢查是正確的節點）

代碼：

//listener that will be executed on setIntervalCheck to update the graphic 
setInterval(function(){ 
    moveForwardOnBubbleList(); 
    createElementGroup(); 
    }, 100000); 



var profile_pic_url="https://scontent.fsst1-2.fna.fbcdn.net/v/t1.0-9/13680856_103268503450198_1479797031996897052_n.jpg?oh=f43bced91822fb210c8be8a410825da9&oe=58D46460"; 

var dataset = [{unique_followers: 5, profile_pic:profile_pic_url}, {unique_followers: 10, profile_pic:profile_pic_url},{ unique_followers: 15, profile_pic:profile_pic_url}, { unique_followers: 20, profile_pic:profile_pic_url}, { unique_followers: 25, profile_pic:profile_pic_url}, {unique_followers: 40, profile_pic:profile_pic_url} ]; 

var w=600,h=600; 

var svg=d3.select("body").append("svg") 
            .attr("width",w) 
            .attr("height",h); 

//1st level:All circles group 
var circlesGroup = svg.append("g").classed("general-group",true); 
//2nd level: Group of circle and text 
var elementGroup; 

var circle; 

var circleAttributes; 
//create g's of existing data 
createElementGroup(); 

elementGroup.on('click', function(d,i){ 
    var that=this; 

    d3.selectAll('.element-group').each(function(d,i) { 
    if(this.id!==that.id){ 
     d3.select(this).classed("selected",false); 
    } 
    }); 

    d3.select(this).classed("selected", !d3.select(this).classed("selected")); 

    }); 

//adding circular background image to the circles 
//var circlesSelection=svg.selectAll('circle'); 


function createElementGroup(){ 
    elementGroup = circlesGroup 
    .selectAll('circle') 
    .data(dataset) 
    .enter() 
    .append("g").classed("element-group",true); 

    circle=elementGroup.append('circle'); 

    circleAttributes = circle 
    .attr("r", 20) 
    .attr("stroke","black") 
    .attr("fill", "white") 
    .classed("circle",true); 

    //text to show 
    elementGroup.append("text") 
     .attr("text-anchor", "middle") 
    .text(function(d) { 
    return parseInt(d.unique_followers); 
    }) 
    .style("pointer-events","none") 
    .classed('tweet-number', true); 

    //image to show as background 

    //element group positioning for the text to be inside circle 
    elementGroup.attr("transform", function(d,i){ 
    return "translate(" + (i*80+45) + "," + h/2 + ")"; 
}); 

    elementGroup.attr("fill-opacity", 0).transition().duration(500).attr("fill-opacity", 1); 
    elementGroup.attr("id", function(d, i) { return "c"+i; }); 


} 

function addBubbleLast(){ 
    dataset.push({unique_followers: 40, profile_pic:profile_pic_url}); 
} 

function removeFirstBubble(){ 
    dataset.shift(); 

} 

function moveForwardOnBubbleList(){ 
    addBubbleLast(); 
    removeFirstBubble(); 
} 



/*CSS*/ 
body 
     { 
      /*padding-top: 50px;*/ 
      padding-left: 100px; 
     } 

     .tweet-number{ 
     opacity:0.25; 
     } 

     .circle{ 

     } 


     .selected *{ 
      transform: scale(2); 
      transition: all 0.5s ease, opacity 0.5s ease; 
      opacity:1.0; 
    } 

編輯：固定代碼赫拉爾多Furtado偉大的建議。我發佈它以防萬一有人遇到類似問題：

//listener that will be executed on setIntervalCheck to update the graphic 
setInterval(function(){ 
    moveForwardOnBubbleList(); 
    createElementGroup(); 
    }, 6000); 



var profile_pic_url="https://scontent.fsst1-2.fna.fbcdn.net/v/t1.0-9/13680856_103268503450198_1479797031996897052_n.jpg?oh=f43bced91822fb210c8be8a410825da9&oe=58D46460"; 

var dataset = [{unique_followers: 5, profile_pic:profile_pic_url}, {unique_followers: 10, profile_pic:profile_pic_url},{ unique_followers: 15, profile_pic:profile_pic_url}, { unique_followers: 20, profile_pic:profile_pic_url}, { unique_followers: 25, profile_pic:profile_pic_url}, {unique_followers: 40, profile_pic:profile_pic_url} ]; 

var w=900,h=600; 

var svg=d3.select("body").append("svg") 
            .attr("width",w) 
            .attr("height",h); 

//1st level:All circles group 
var circlesGroup = svg.append("g").classed("general-group",true); 
//2nd level: Group of circle and text 
var elementGroup; 

var circle; 

var circleAttributes; 
//create g's of existing data 
createElementGroup(); 



//adding circular background image to the circles 
//var circlesSelection=svg.selectAll('circle'); 


function createElementGroup(){ 
    elementGroup = circlesGroup 
    .selectAll('.element-group') 
    .data(dataset, function(d){ return d.unique_followers}); 
//doesn't work the exit transition 
    var elementExit = elementGroup.exit().transition().duration(1000).style("opacity", 0).remove(); 

    var elementEnter = elementGroup.enter() 
    .append("g").classed("element-group",true).style("opacity",0); 

    elementEnter.merge(elementGroup).attr("transform", function(d,i){ 

    //option 1 generation by mod 
    if(i%2===0){ 
    return "translate(" + (i*80+45) + "," + h/1.55 + ")"; 
    }else{ 
    return "translate(" + (i*80+45) + "," + h/1.45 + ")"; 

    } 

    /* 
    //option 2 random 
    var random= (Math.random() * (1.6 - 1.45) + 1.45).toFixed(4); 

     return "translate(" + (i*80+45) + "," + h/random + ")";*/ 


}).transition().duration(2000).style("opacity", 1.0); 

    circle=elementEnter.append('circle'); 



    circleAttributes = circle 
    .attr("r", 20) 
    .attr("stroke","black") 
    .attr("fill", "white") 
    .classed("circle",true); 

    d3.selectAll('.element-group').on('click', function(d,i){ 
    var that=this; 
    d3.selectAll('.element-group').each(function(d,i) { 
    if(this.id!==that.id){ 
     d3.select(this).classed("selected",false); 
    } 
    }); 

    d3.select(this).classed("selected", !d3.select(this).classed("selected")); 

    }); 

    //text to show 
    var texts = elementEnter.append("text") 
     .attr("text-anchor", "middle") 
    .text(function(d) { 
    return parseInt(d.unique_followers); 
    }) 
    .style("pointer-events","none") 
    .classed('tweet-number', true); 

    //image to show as background 

    //element group positioning for the text to be inside circle 



} 

function addBubbleLast(){ 

    var random=Math.floor(Math.random() * (40)) + 1; 


    dataset.push({unique_followers: random, profile_pic:profile_pic_url}); 
} 

function removeFirstBubble(){ 
    dataset.shift(); 

} 

function moveForwardOnBubbleList(){ 
    addBubbleLast(); 
    removeFirstBubble(); 
} 

//CSS 

    body 
    { 
     /*padding-top: 50px;*/ 
     padding-left: 100px; 
    } 

    .tweet-number{ 
    opacity:0.25; 
    } 

    .circle{ 

    } 

.selected *{ 
     transform: scale(2); 
     transition: all 0.5s ease; 
     opacity:1.0; 
} 

.element-group *{ 
    transition: all 0.5s ease; 
} 

circle + text{ 
} 

Answer 1

您需要「回車」，「退出」和「更新」選項。

首先，我們將數據綁定（用鑰匙功能）：

elementGroup = circlesGroup 
    .selectAll('.element-group') 
    .data(dataset, function(d){ return d.unique_followers}); 

然後，我們設置的輸入選擇：

var elementEnter = elementGroup.enter() 
    .append("g").classed("element-group",true); 

現在，一個重要的注意事項：由於這是D3 V4。 x，你需要merge有選擇的工作更新選擇：

elementEnter.merge(elementGroup).attr("transform", function(d,i){ 
    return "translate(" + (i*80+45) + "," + h/2 + ")"; 
}); 

最後，ex它的選擇：

var elementExit = elementGroup.exit().remove(); 

這裏是你的CodePen：http://codepen.io/anon/pen/Wobyem