block by nitaku c0428b51925dd9d912e638a5d48e5944

Zoom vs. Click (d3v3)

Full Screen

A d3 version 3 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 4 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.behavior.zoom().scaleExtent([-Infinity, Infinity]).on('zoom', function() {
    return zoomable_layer.attr({
      transform: "translate(" + (zoom.translate()) + ") scale(" + (zoom.scale()) + ")"
    });
  });

  svg.call(zoom);

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

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

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

}).call(this);

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>D3v3 zoom vs click</title>
  <link type="text/css" href="index.css" rel="stylesheet"/>
  <script src="https://d3js.org/d3.v3.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.behavior.zoom()
  .scaleExtent([-Infinity,Infinity])
  .on 'zoom', () ->
    zoomable_layer
      .attr
        transform: "translate(#{zoom.translate()}) scale(#{zoom.scale()})"
        
svg.call zoom

zoomable_layer.append 'circle'
  .attr
    r: 100
    cx: width/2
    cy: height/2
    fill: 'teal'
    
zoomable_layer.append 'text'
  .text '3'
  .attr
    x: width/2
    y: height/2
    
zoomable_layer.append 'circle'
  .attr
    r: 60
    cx: 2*width/5
    cy: height/3
    fill: 'orange'
  .on 'click', () ->
    d3.select(this)
      .attr
        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;
}