D3 Examples - d3 Tube Map

xxxxxxxxxx
 
<html>
​
<head>
  <link rel="stylesheet" href="tubeMap.css">
  <script src="https://d3js.org/d3.v5.js"></script>
  <script src="https://unpkg.com/d3-tube-map@latest/dist/d3-tube-map.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Hammersmith+One' rel='stylesheet' type='text/css'>
</head>
​
<body>
  <div id="tube-map">
  </div>
  <script>
    var container = d3.select('#tube-map');
    var width = 1600;
    var height = 1000;
​
    var map = d3.tubeMap()
      .width(width)
      .height(height)
      .margin({
        top: 20,
        right: 20,
        bottom: 40,
        left: 100,
      })
      .on("click", function (name) {
        console.log(name);
      });
​
    d3.json("./stations.json").then(function(data) {
      container
        .datum(data).call(map);
​
      var svg = container.select('svg');
​
      zoom = d3
        .zoom()
        .scaleExtent([0.5, 6])
        .on('zoom', zoomed);
​
      var zoomContainer = svg.call(zoom);
      var initialScale = 2;
      var initialTranslate = [100, 200];
​
      zoom.scaleTo(zoomContainer, initialScale);
      zoom.translateTo(zoomContainer, initialTranslate[0], initialTranslate[1]);
​
      function zoomed() {
        svg.select('g').attr('transform', d3.event.transform.toString());
      }
    });
  </script>
</body>
​
</html>
    