D3 V4动态数据更新无法正常工作

Question

我正在尝试动态添加已有路径列表的路径。以下是代码段

        const pathArcs = arcGroup.selectAll('.arc')
          .data(links).enter()
          .append('path')
          .attr('class', 'arc')
          .style('fill', 'none')
          .on('click', d => { //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();

如上所示，当我点击该行时，我尝试通过将新行数据推送到列表来绘制具有不同角度的新行。但是我没有看到画线。用于V3版本的代码相同。我读到了V4中的变化，其中数据生命周期已经改变并建议使用合并，因此我尝试使用合并但仍然没有绘制新行。但是，如果我嵌套创建行的代码，它的工作方式如下所示。

   const pathArcs = arcGroup.selectAll('.arc')
      .data(links).enter()
      .append('path')
      .attr('class', 'arc')
      .style('fill', 'none')
      .on('click', d => { //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();

虽然上面的代码有效，但是其他问题如转换/翻译对新行无效。

不确定为什么合并不起作用，here是完整的ts文件。

更新

   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();

现在虽然合并现在正在运行，但是我看到所有线路都会触发转换（来自a -> b的绘图线）。如何才能重新绘制新行？我相信我的合并仍未按预期工作。