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