Transitions Off SVG elem

by Nivaldo

HTML

<!-- based on http://stackoverflow.com/questions/15794619/d3-js-chain-transitions-for-compound-animations-for-different-shapes -->
<svg id="parent">
    <svg class="A"></svg>
    <svg class="B"></svg>
</svg>

JavaScript

function lineAnimate(selection) {
    console.log("still working");
    selection
        .attr('x1',function(d) {return d.xpos;})
        .attr('x2',function(d) {return d.xpos;})
        .attr('y1', function(d) {return d.ypos;})
        .attr('y2', function(d) {return d.ypos;})
        .style('opacity', 1)
        .attr('x2', 500)
        .style('opacity', 0)
}

d3.select(".A")
    .style({'width': '800px', 'height': '100px'})
    .selectAll('lineA').data([{xpos: "30",    ypos:  40}]) 
  .enter()
  .append('line')
    .attr('class','lineA')
    .attr('x1',function(d) {return d.xpos;})
    .attr('x2',function(d) {return d.xpos;})
    .attr('y1', function(d) {return d.ypos;})
    .attr('y2', function(d) {return d.ypos;})
    .style('opacity', 1)
    .style({'stroke': 'black', 'stroke-width': '3px'});

d3.select(".B")
    .style({'width': '800px', 'height': '100px'})
    .selectAll('lineB')
    .data([{xpos: "70",    ypos:  50}]) 
  .enter()
  .append('line')
    .attr('class','lineB')
    .attr('x1',function(d) {return d.xpos;})
    .attr('x2',function(d) {return d.xpos;})
    .attr('y1', function(d) {return d.ypos;})
    .attr('y2', function(d) {return d.ypos;})
    .style('opacity', 1)
    .style({'stroke': 'black', 'stroke-width': '3px'});

var svg = d3.select("#parent");
var t0 = svg.transition().duration(1200);
t0.selectAll('.lineA').call(lineAnimate);
var t1 = t0.transition();
t1.selectAll('.lineB').call(lineAnimate);