D3 Examples - closer

xxxxxxxxxx
 
<!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>
​
    