JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<button id="update">
Update
</button>
<input id="cb1" type="checkbox" checked> Second Line<br>
<svg style="width: 500px; height: 500px"></svg>

CSS

.line {
  fill: none;
  stroke-width: 1.5px;
}

JavaScript

var first_data = [{
    id: 'p1',
    points: [{
      point: {
        x: 100,
        y: 10
      }
    }, {
      point: {
        x: 100,
        y: 30
      }
    }]
  },
  {
    id: 'p2',
    points: [{
        point: {
          x: 30,
          y: 100
        }
      }, {
        point: {
          x: 230,
          y: 30
        }
      },
      {
        point: {
          x: 50,
          y: 200
        }
      },
      {
        point: {
          x: 50,
          y: 300
        }
      },
    ]
  }
];

var svg = d3.select("svg");

var line = d3.line()
  .x((d) => d.point.x)
  .y((d) => d.point.y);

function updateGraph(data) {
  console.log('dataset contains', data.length, 'item(s)')
  var allGroup = svg.selectAll(".pathGroup")
  	.data(data, function(d) { return d; });

  var g = allGroup.enter()
    .append("g")
    .attr("class", "pathGroup")
  
  allGroup.exit().remove()

  g.append("path")
    .attr("class", "line")
    .attr("stroke", "red")
    .attr("stroke-width", "1px")
    .transition()
    .duration(500)
    .attr("d", function(d) {
    	console.log("update path");
      return line(d.points)
    });

  g.selectAll("path")
  .transition()
  .duration(500)
  .attr("d", function(d) {
    return line(d.points)
  });

  g.selectAll("circle")
    .data(d => d.points)
    .enter()
    .append("circle")
    .attr("r", 4)
    .attr("fill", "teal")
    .attr("cx", function(d) {
      return d.point.x
    })
    .attr("cy", function(d) {
      return d.point.y
    })
    .exit().remove()

}
updateGraph(first_data)

document.getElementById('update').onclick = function(e) {

  var update_data = [{
      id: 'p1',
      points: [{
        point: {
          x: 20,
          y: 10
        }
      }, {
        point: {
          x: 100,
          y: 30
        }
      }]
    },
    {
      id: 'p2',
      points: [{
          point: {
            x: 30,
            y: 100
          }
        }, {
          point: {
            x: 230,
            y: 30
...