javascript - 如何在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 的不透明度时，存在一些已知的错误。我在这里的回答仅解决您的问题，而不是那些错误。正如您所看到的，结果有问题。