title: Transition and opacity does not work well together
body: <p>I set a 1500 ms duration for a transition triggered on click</p>
  
  <p>On first run, the transition appears to be of 0 ms duration, which is not expected -_-</p>
  
  <p>Mminimal example with corresponding fiddle (<a href="http://jsbin.com/pasodopeyati/3/edit" rel="nofollow">http://jsbin.com/pasodopeyati/3/edit</a>) :</p>
  
  <pre><code>// create svg element
  var svg = d3.select("body").append("svg").attr('width', 200).attr('height', 200);
  
  // add 4 red circles
  svg.selectAll('circle').data([{'n': 0}, {'n': 1}, {'n': 2}, {'n': 3}])
    .enter()
    .append('circle')
    .attr({
      cx: function(d, i) { return (i % 2) * 50 + 50;},
      cy: function(d, i) { return Math.floor(i / 2) * 50 + 50;},
      r:10,
      fill: 'red'
    });
  
  
  // counter
  var i = 0;  
  
  // create button and bind on click
  d3.select("body").append('button').text('fade').on('click', function () {
    // fade 3 circles alternatively (cf. counter)
    svg.selectAll('circle')
    .transition()
    .duration(2000)
    .attr('opacity', function(d) { return d.n == i ? 1 : 0.1});
  
    i = (i + 1) % 4;
  });
  </code></pre>
  
  <p>Try it! you'll notice that the first click will instantely fade 3 circles, and from that click on it will transition with a 1500ms duration as expected.</p>
  
  <p><strong>How can I make the duration of the first transtion 1500 ms?</strong></p>
  
  <p>Bonus: <strong>Why is my code behaving as such?</strong></p>