d3-tube-map + popover

forked from johnwalley's block: d3-tube-map + popover

<html>

<body>
  <div id="tube-map">
  </div>
  <script>
    var container = d3.select('#tube-map');
    var width = 1600;
    var height = 600;

var map = d3.tubeMap()
      .width(width)
      .height(height)
      .margin({
        top: 20,
        right: 20,
        bottom: 40,
        left: 100,
      });

d3.json("pubs.json", function (error, data) {
      container
        .datum(data).call(map);

container.selectAll('.label')
        .attr('title', function (d) { return d.label; })
        .attr('data-content', function (d) { return d.address; })
        .attr('data-trigger', 'focus')
        .attr('tabindex', 0);

$('svg .label').popover({ container: 'body' });

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());
        $('.popover').popover('update')
      }
    });
  </script>
</body>

</html>

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

https://unpkg.com/d3-tube-map@latest/dist/d3-tube-map.js