title: D3 V4 dynamic data update not working
body: <p>I'm trying to dynamically add a path to already existing list of paths. Below is the code snippet</p>
  
  <pre><code>        const pathArcs = arcGroup.selectAll('.arc')
            .data(links).enter()
            .append('path')
            .attr('class', 'arc')
            .style('fill', 'none')
            .on('click', d =&gt; { //some logic here
                 links.push(new Data());
            }
  
          // update
          pathArcs.attr('d', path)
            .style('stroke', '#0000ff')
            .style('stroke-width', '2px')
            .transition().duration(1500)
            .attrTween('stroke-dasharray', tweenDash);
  
          // exit
          pathArcs.exit().remove();
  </code></pre>
  
  <p>As shown above when I click on the line, I try to draw a new line with different angle by just pushing the new line data to list. However I don't see the line being drawn. The same code used to work in V3 version. I read about change in V4 where data life cycle has been changed and suggested to use merge, Hence I tried to use merge but still new line is not getting drawn. However if I nest the code of creation of line it works as shown below.</p>
  
  <pre><code>   const pathArcs = arcGroup.selectAll('.arc')
        .data(links).enter()
        .append('path')
        .attr('class', 'arc')
        .style('fill', 'none')
        .on('click', d =&gt; { //some logic here
             links.push(new Data());
             const pathArcs1 = arcGroup.selectAll('.arc')
               .data(links).enter()
               .append('path')
               .attr('class', 'arc')
               .style('fill', 'none')
               .attr('d', path)
               .style('stroke', '#0000ff')
               .style('stroke-width', '2px')
               .transition().duration(1500)
               .attrTween('stroke-dasharray', tweenDash)
        }
  
      // update
      pathArcs.attr('d', path)
        .style('stroke', '#0000ff')
        .style('stroke-width', '2px')
        .transition().duration(1500)
        .attrTween('stroke-dasharray', tweenDash);
  
      // exit
      pathArcs.exit().remove();
  </code></pre>
  
  <p>Though the above code works but it has other issues like transformation/translation doesn't work properly for new lines.</p>
  
  <p>Not sure why merge is not working, <a href="https://github.com/kprasad99/angular-d3/blob/master/src/app/app.component.ts" rel="nofollow noreferrer">here</a> is the complete ts file.</p>
  
  <h2>Update</h2>
  
  <pre><code>   function drawLine(){
  
          const pathArcs = arcGroup.selectAll('.arc')
            .data(links);
  
          pathArcs.attr("class", "arc");
  
          pathArcs.enter()
            .append('path').attr('class', 'arc')
            .style('fill', 'none')
            .on('click', function(d){
                  links.push({
                      type: 'LineString',
                      coordinates: [
                          [data[0].lon, data[0].lat],
                          [data[4].lon, data[4].lat]
                      ]
                  });
                  drawLine();
            }).merge(pathArcs).attr('d', path)
            .style('stroke', '#0000ff')
            .style('stroke-width', '2px')
            .transition().duration(1500)
            .attrTween('stroke-dasharray', tweenDash);
  
          // exit
          pathArcs.exit().remove();
  
          };
          drawLine();
  </code></pre>
  
  <p>Now though merge is working now, however I see transition (drawing line from <code>a -&gt; b</code>) is getting triggered for all lines. How can I make only new line to be redrawn? I believe my merge is still not working as expected. </p>