0

我正在尝试使用 d3 使用带有 d3 过渡的 svg 文本为文本设置动画。我让它根据需要为单个字符串工作。

我想遍历 json 对象数组中的字符串。

我也可以这样做。

所有的绘画和过渡都很好。问题是，它们都是同时发生的，而且看起来是相互叠加的，而且都同时具有动画效果。

我尝试将它们放在 setTimeout() 中以使它们按顺序出现。

还是不行。

对于（我在haikuStr中）{

if( i !=0 ){
 //Make it wait if an appropriate time it is not the first one
     setTimeout( function() {
     showText();
 }, 11000 * i );
} else {
     //if i=0, don't make folks wait
    showText();
}

}

showText() 函数是完整的创建容器 -> 完成转换。

我使用 11000 * i 来确保 >2 次迭代每个 i 有 11 秒的额外时间。

我花了很多时间阅读并试图弄清楚如何让循环在循环绘制下一行之前暂停。

任何想法或想法将不胜感激。

不定时的例子在这里，如果你希望看到文本混乱：

http://www.mysalmagundi.com/js/svg-d3-no-timing.html

4

1 回答 1

0

Have you read Thinking with Joins? Or some of the other introductory D3 tutorials, such as those by Scott Murray? Or Three Little Circles, or Working with Selections? I ask because your showText function is misusing data joins; it creates text elements for every element in the global haikuStr array:

var text = haikuContainer.selectAll("text")
    .data(haikuStr)
    .html(String)
  .enter().append("text");

And all your text elements are overlapping because you set them to have the same y-attribute:

var thisHaiku = text
    .attr("x", -800)
    .attr("y", 120)

(Also, that selection.html call is a no-op because the update selection is guaranteed to be empty, since you just created haikuContainer it is guaranteed to not have any descendant text elements. And thisHaiku is the same value as the var text, because when method chaining selection.attr and similar methods return the current selection; so there’s no reason to create a separate var. Also, you shouldn’t use a for-in loop to iterate over arrays.)

If you wait 11 seconds, you’ll see the second SVG appear, but because of your data join as described above, it has the same overlapping text content.

If you just want to show a single piece of text, then pass that string to your showText function (e.g., showText("hello")). Then, since you’re just creating individual elements, just selection.append them rather than using a data-join. You only need the data-join when you’re creating (or updating or removing) a variable number of elements based on data; in this case it looks like you’re trying to just create a single element.

于 2013-06-02T05:16:37.163 回答