我有一个气泡行,在任何给定时间我都有 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;
}
编辑:根据 Gerardo 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{
}
最佳答案
您需要“进入”、“退出”和“更新”选项。
首先,我们绑定(bind)数据(使用键函数):
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 + ")";
});
最后是退出选择:
var elementExit = elementGroup.exit().remove();
这是您的 CodePen:http://codepen.io/anon/pen/Wobyem
关于javascript - D3.js: "On the fly"添加到数组的元素不刷新 svg 图形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40455766/