Glitchy drag

_.md

[ Launch: Glitchy drag ] b24ad4f8f9b9d73a99cd by trinary
[ Launch: Tributary inlet ] 7dada307d1dd39506e27 by trinary

config.json

{"description":"Glitchy drag","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true}

inlet.js

var svg = d3.select("svg");

var c = svg.append("g").classed("con", true);
var zoom = d3.behavior.zoom().scaleExtent([0.5, 5]).on("zoom", zoomed);

c.append("rect").attr({
  x: 10,
  y: 10, 
  width: 20,
  height:20
});

var button = svg.append("g").classed("button", true);
button.attr("transform", "translate(200,200)").append("rect").attr({
  x: 0,
  y: 0,
  width: 100,
  height: 40,
  fill: "#ffffff",
  stroke: "#ff00ff"
});
button.append("text").text("reset").attr({dx: 29, dy: 21});
button.on("click", resetZoom);

function resetZoom() {
    d3.select(".con").call(zoom.translate([0,0]).scale(1).event());
}

function zoomed() {
  d3.select(this).attr("transform", "translate(" + [d3.event.translate] + ") scale(" + d3.event.scale + ")");
}


c.call(zoom);