block by nitaku 6545ba8d7146a4843e4bd1b0fa9f1268

Zoom vs. Click (d3v4)

Full Screen

A d3 version 4 implementation of a zoomable view with clickable content. Click the orange circle to turn it into red, drag with the mouse to pan, use the mouse wheel to zoom, or pinch with your fingers to zoom and pan.

Compare with a d3 version 3 implementation.

index.js

// Generated by CoffeeScript 1.10.0
(function() {
  var height, svg, width, zoom, zoomable_layer;

  svg = d3.select('svg');

  width = svg.node().getBoundingClientRect().width;

  height = svg.node().getBoundingClientRect().height;

  zoomable_layer = svg.append('g');

  zoom = d3.zoom().scaleExtent([-Infinity, Infinity]).on('zoom', function() {
    return zoomable_layer.attrs({
      transform: d3.event.transform
    });
  });

  svg.call(zoom);

  zoomable_layer.append('circle').attrs({
    r: 100,
    cx: width / 2,
    cy: height / 2,
    fill: 'teal'
  });

  zoomable_layer.append('text').text('4').attrs({
    x: width / 2,
    y: height / 2
  });

  zoomable_layer.append('circle').attrs({
    r: 60,
    cx: 2 * width / 5,
    cy: height / 3,
    fill: 'orange'
  }).on('click', function() {
    return d3.select(this).attrs({
      fill: 'red'
    });
  });

}).call(this);

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>d3v4 zoom</title>
  <link type="text/css" href="index.css" rel="stylesheet"/>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
</head>
<body>
  <svg></svg>
  <script src="index.js"></script>
</body>
</html>

index.coffee

svg = d3.select 'svg'
width = svg.node().getBoundingClientRect().width
height = svg.node().getBoundingClientRect().height

zoomable_layer = svg.append 'g'

zoom = d3.zoom()
  .scaleExtent([-Infinity,Infinity])
  .on 'zoom', () ->
    zoomable_layer
      .attrs
        transform: d3.event.transform

svg.call zoom

zoomable_layer.append 'circle'
  .attrs
    r: 100
    cx: width/2
    cy: height/2
    fill: 'teal'
    
zoomable_layer.append 'text'
  .text '4'
  .attrs
    x: width/2
    y: height/2
    
zoomable_layer.append 'circle'
  .attrs
    r: 60
    cx: 2*width/5
    cy: height/3
    fill: 'orange'
  .on 'click', () ->
    d3.select(this)
      .attrs
        fill: 'red'

index.css

body, html {
  padding: 0;
  margin: 0;
  height: 100%;
}
svg {
  width: 100%;
  height: 100%;
  background: white;
}
text {
  text-anchor: middle;
  font-family: sans-serif;
  font-size: 72px;
  text-shadow: -1px -1px white, -1px 1px white, 1px 1px white, 1px -1px white, -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}