更新d3.js中的文本元素

d3.js是否可以逐个删除文本元素并在元素被删除时立即更新它们？因此，例如：图像中显示的初始字符串为0，然后删除第一个文本元素，然后立即更新它，依此类推。更新d3.js中的文本元素

https://lh4.googleusercontent.com/-BxbMS_JqyO0/UzgsTEC_SgI/AAAAAAAAAAw/tVs3ADJCGJg/s3200/Screen+Shot+2014-03-30+at+15.37.35.png

我一直停留在这一段时间，我可以删除一次所有的元素，但不是一个接一个。有人可以请指点我正确的方向吗？有我可以看看的教程吗？

下面是示例代码：

 var stepData = [ [[0,0,0,0,0,0,0],[0,1,1,1,1,1,1],[0,1,2,2,2,2,2],[0,1,2,2,2,2,2]], [[0,0,0,0,0,0,0],[0,0,0,0,0,1,1],[0,1,1,1,1,1,1],[0,1,1,2,2,2,2]] ]; 
    svgWidth = 600; 
    svgHeight = 1000; 
    delay = 1000; 
    svg = d3.select("body") 
      .append("svg") 
      .attr("width", svgWidth) 
      .attr("height", svgHeight); 

svg.append("g") 
    .attr("class", "data") 
    .selectAll("g")     
    .data(stepData[0]) 
    .enter() 
    .append("g") 
    .selectAll("text") 
    .data(function(d,i,j){ 
     return d; 
    }) 
    .enter() 
    .append("text") 
    .text(function(d,i,j) { 
    if (j === 0) { 
     return d; 
    } 
    }) 
    .attr("x", function(d,i,j) { return (i * 50) + 50; }) 
    .attr("y", function(d,i,j) { return (j * 50) + 50; }) 
    .attr("text-anchor", "middle") 
    .attr("fill", "black"); 

svg.select(".data") 
    .transition() 
    .delay(function(d, i, j) {  
      return i * delay + 1000; 
    }) 
    .remove();

谢谢。

来源

2014-03-30 user3441959

是的，你当然可以做到这一点。你能向我们展示迄今为止的代码吗？ –

@LarsKottoff我添加了代码。 – user3441959

问题是，你选择g元素包含的一切并删除。您的选择只包含一个元素，因此一次都会被删除。如果您改为选择text元素，则它可以正常工作。

完整演示here。

来源

2014-03-31 08:33:00

谢谢！ :)这正是我想要做的。 – user3441959

更新d3.js中的文本元素

回答

相关问题