I am currently experimenting with transitioning opacities of a group of foreignObject text. My goal is to have each element transition individually at random durations, rather than all at the same time. Is it possible to achieve this without creating separate variables for each one? Thank you for looking into this.
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>");
// Additional foreignObject elements
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);