如何在 D3 中以不同的持续时间转换一组异物

Question

我正在尝试转换一组 foreignObject 文本的不透明度，特别是让它们以不同的随机持续时间单独转换。现在他们都在同时过渡。这是可能的还是我必须让他们每个人都有自己的变量？感谢您查看此内容。

        var city = canvas.append('g')
                    .attr('width',1024)
                    .attr('text-anchor','start');

        city.append('foreignObject')
            .attr('x',40)
            .attr('y',0)
            .append('xhtml:body')
            .html("<h1>Milwaukee</h1><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>");

        city.append('foreignObject')
            .attr('x',365)
            .attr('y',0)
            .append('xhtml:body')
            .html("<h1>Chicago</h1><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>");

        city.append('foreignObject')
            .attr('x',690)
            .attr('y',0)
            .append('xhtml:body')
            .html("<h1>Detroit</h1><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>");
                    city.append('foreignObject')
            .attr('x',40)
            .attr('y',350)
            .append('xhtml:body')
            .html("<h1>Columbus</h1><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>");

        city.append('foreignObject')
            .attr('x',365)
            .attr('y',350)
            .append('xhtml:body')
            .html("<h1>Cleveland</h1><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>");

        city.append('foreignObject')
            .attr('x',690)
            .attr('y',350)
            .append('xhtml:body')
            .html("<h1>Louisville</h1><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>");


          city.transition()
            .duration((Math.random() * 500) + 100)
            .delay(0)
            .attr('opacity',0)
            .transition()
            .duration((Math.random() * 500) + 100)
            .delay(Math.random() * 500)
            .attr('opacity',1);

Answer 1

现在，city 是一个小组。因此，您仅将不透明度应用于该组。

一个解决方案是选择所有 foreignObjects 并使用 each:

canvas.selectAll("foreignObject").each(function() {
    d3.select(this).transition()
        .duration((Math.random() * 1000) + 1000)
        .style('opacity', 0)
        .transition()
        .duration((Math.random() * 1000) + 100)
        .delay(Math.random() * 500)
        .style('opacity', 1);
})

这是一个演示：

var canvas = d3.select("body")
  .append("svg")
  .attr("width", 800)
  .attr("height", 600)

var city = canvas.append('g');

city.append('foreignObject')
  .attr('x', 40)
  .attr('y', 0)
  .attr("width", 100)
  .attr("height", 50)
  .style("opacity", 1)
  .append('xhtml:body')
  .html("<h1>Milwaukee</h1><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>");

city.append('foreignObject')
  .attr('x', 365)
  .attr('y', 0)
  .attr("width", 100)
  .attr("height", 50)
  .style("opacity", 1)
  .append('xhtml:body')
  .html("<h1>Chicago</h1><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>");

city.append('foreignObject')
  .attr('x', 690)
  .attr('y', 0)
  .attr("width", 100)
  .attr("height", 50)
  .style("opacity", 1)
  .append('xhtml:body')
  .html("<h1>Detroit</h1><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>");

city.append('foreignObject')
  .attr('x', 40)
  .attr('y', 350)
  .attr("width", 100)
  .attr("height", 50)
  .style("opacity", 1)
  .append('xhtml:body')
  .html("<h1>Columbus</h1><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>");

city.append('foreignObject')
  .attr('x', 365)
  .attr('y', 350)
  .attr("width", 100)
  .attr("height", 50)
  .style("opacity", 1)
  .append('xhtml:body')
  .html("<h1>Cleveland</h1><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>");

city.append('foreignObject')
  .attr('x', 690)
  .attr('y', 350)
  .attr("width", 100)
  .attr("height", 50)
  .style("opacity", 1)
  .append('xhtml:body')
  .html("<h1>Louisville</h1><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>");

canvas.selectAll("foreignObject").each(function() {
  d3.select(this).transition()
    .duration((Math.random() * 1000) + 1000)
    .style('opacity', 0)
    .transition()
    .duration((Math.random() * 1000) + 100)
    .delay(Math.random() * 500)
    .style('opacity', 1);
})

<script src="https://d3js.org/d3.v4.min.js"></script>

PS：你必须设置foreignObjects的宽度和高度。

PPS：像您现在所做的那样更改 foreignObjects 的不透明度时存在一些已知错误。我在这里的回答 仅解决您的问题 ，而不是那些错误。结果如你所见，有问题

如何在 D3 中以不同的持续时间转换一组异物

How to transition group of foreign objects at different durations in D3

javascript

animation

transition

opacity

d3.js