Question

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

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

谢谢。

Answer 1

问题是您选择了包含所有内容的g元素并将其删除。您的选择只包含一个元素，因此一次性删除所有内容。如果您改为选择text元素，则可以正常工作。

完整演示here。

更新d3.js中的文本元素

1 个答案: