title: How to update the index (i) on bound data in d3?
body: <p>On the first enter I bind data to a svg like this:</p>
  <pre><code>var dateContainer = svg.selectAll(&quot;g.dateContainerClass&quot;)
      .data(dateData, function(d) {
         return d.id
      });
  
  var dateContainerEnter = dateContainer.enter()
      .append(&quot;g&quot;)
      .attr(&quot;class&quot;, &quot;dateContainerClass&quot;);
  </code></pre>
  <p>At this point the bound data consists of an array with 5 entries. So <code>i</code> is 0 to 4, first to last. Now the array is updated: two new entries are spliced in between 0 and 1.</p>
  <pre><code>dateData.splice((i + 1), 0, rawData[(rawIndex + 1)], rawData[(rawIndex + 2)])
  </code></pre>
  <p>After that the new <code>dateData</code> is bound to the selection again, as shown above. What I was expecting to happen is this:</p>
  <pre><code>i=0 (old)
  i=1 (new)
  i=2 (new)
  i=3 (old)
  i=4 (old)
  etc.
  </code></pre>
  <p>What actually happens is this:</p>
  <pre><code>i=0 (old)
  i=1 (new)
  i=2 (new)
  i=1 (old)
  i=2 (old)
  etc.
  </code></pre>
  <p>Am I doing something wrong or is this expected behavior? Any help would be really appreciated!</p>
  <p><strong>EDIT:</strong></p>
  <p>Added snippet:
  Please run snippet full screen and click on Day1. When you inspect the element, the <code>id</code> of <code>class</code> &quot;dateflag&quot; should go up one each, which it does not.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var windowWidth = window.innerWidth;
  var storyline = d3.select(".Storyline").append("svg");
  
  function update(dateData, rawData) {
    console.log(dateData)
    var x = d3.scaleLinear()
      .domain([0, (dateData.length - 1)])
      .range(["10%", "80%"]);
  
    storyline
      .transition()
      .duration(500)
      .delay(50)
      .attr("width", (dateData.length * 20) + "%")
      .attr("height", "100%")
  
    var dateFlags = storyline.selectAll("g.dateflag")
      .data(dateData, function(d, i) {
        return d
      });
  
    //ENTER
  
    var dateFlagsEnter = dateFlags.enter()
      .append("g")
      .attr("class", "dateflag")
      .attr("id", function(d, i) {
        console.log("ContainerID: " + i)
        return i
      });
  
    dateFlagsEnter.append("foreignObject")
      .attr("class", "timePoints")
      .attr("width", "130px")
      .attr("height", "100%")
      .attr("x", function(d, i) {
        return x(i);
      })
      .attr("y", function(d, i) {
        var topBottom;
        if ((i % 2) == 1) {
          topBottom = "35%";
        } else {
          topBottom = "40%";
        }
        return topBottom;
      })
      .attr("opacity", "0%");
  
    dateFlagsEnter.select(".timePoints").append("xhtml:div")
      .attr("class", "tpGroup")
  
    dateFlagsEnter.select(".tpGroup").append("xhtml:div")
      .attr("id", "dateLabel")
      .append("xhtml:div")
      .html(function(d, i) {
        return d + " index= " + i;
      })
      .attr("id", "dateLabelText")
      .on("click", function(d, i) {
        var clickIndex = i
        console.log("clickedID: " + clickIndex)
        expand(dateData, clickIndex);
      });
  
    //UPDATE
  
    dateFlags.merge(dateFlagsEnter).select(".timePoints")
      .transition()
      .duration(500)
      .delay(50)
      .attr("x", function(d, i) {
        return x(i);
      })
      .attr("opacity", "100%");
  
    dateFlags.merge(dateFlagsEnter).select("#dateLabelText")
      .html(function(d) {
        return d;
      });
  
    //EXIT
  
    dateFlags.exit().remove();
  
  };
  
  function expand(dateData, clickIndex) {
    var lineIndex = clickIndex
  
    dateData.splice((lineIndex + 1), 0, "Day1.1", "Day1.2")
    update(dateData);
  };
  
  function getDateData() {
    var dateData = ["Day1", "Day2", "Day3", "Day4", "Day5", ]
    update(dateData);
  };
  
  getDateData();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="Storyline"&gt;&lt;/div&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>