closer

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style>

svg {
  font: 10px sans-serif;
}

.axis {
  shape-rendering: crispEdges;
}

.x.axis path {
  fill: none;
  stroke: #000;
}
  
.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

</style>
</head>

<body>
  <button id="b1">data 1</button><button id="b2">data 2</button>
  <script>
  var data1 = [{
  id: 'A',
  values: [{ts: 1, value: 2},{ts: 2, value: 4},{ts: 3, value: 6},{ts: 4, value: 4},{ts: 5, value: 4},{ts: 6, value: 2}]
},
 {
  id: 'B',
  values: [{ts: 1, value: 1},{ts: 2, value: 2},{ts: 3, value: 4.5},{ts: 4, value: 4},{ts: 5, value: 5},{ts: 6, value: 6}]
}]
var data2 = [{
  id: 'C',
  values: [{ts: 1, value: 0},{ts: 2, value: 6},{ts: 3, value: 0},{ts: 4, value: 6},{ts: 5, value: 5},{ts: 6, value: 6}]
}];

document.getElementById('b1').addEventListener('click', function  () {
  update(data1);
})
document.getElementById('b2').addEventListener('click', function  () {
  update(data2);
})

var margin = {top: 40, right: 40, bottom: 40, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var delay = svg
   .append("g")
   .attr("class", "delay")

var x = d3.scaleLinear()
  .range([0, width]);

var y = d3.scaleLinear()
  .range([height, 0]);

var z = d3.scaleOrdinal(d3.schemeCategory10);

var line = d3.line()
.x(function(d) { return x(d.ts); })
.y(function(d) { return y(d.value); });

var update = function (delays) {
  console.log(delays);
var values = delays[0].values;

x.domain([values[0].ts, values[values.length - 1].ts]);
y.domain([0, d3.max(values, function (d) {return d.value})]);

var delayLines = delay.selectAll(".line")
	.data(delays);

delayLines
	.enter()
  .append("path")
  .attr("class", "line")
 .merge(delayLines)
  .attr("d", function(d) { return line(d.values); })
  .style("stroke", function(d) { return z(d.id); });
	
  delayLines.exit().remove()
};

update(data1);
  </script>
</body>

https://d3js.org/d3.v4.min.js

https://unpkg.com/axios/dist/axios.min.js