JSFiddle - React, Tailwind, and code Playground

by emepyc

JavaScript

var svg = d3.select("body")
    .append ("svg")
    .attr ("width", 600)
    .attr ("height", 600);

var g = svg
    .append ("g")
    .style("pointer-events", "all")
    .call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom));

var img = g
    .append ("image")
    .attr ("width", 200)
    .attr ("height", 200)
    .attr ("xlink:href", "http://img1.wikia.nocookie.net/__cb20121230054000/logopedia/images/6/66/NASA_logo.svg.png");

function zoom() {
  g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
  console.log("translate: " + d3.event.translate + ", scale: " + d3.event.scale);
}