Minimap Demo

.block

license: gpl-3.0

README.md

Minimap Demo

d3-minimap.min.js

!function(t,a){"object"==typeof exports&&"undefined"!=typeof module?module.exports=a(require("d3")):"function"==typeof define&&define.amd?define(["d3"],a):t.d3=a(t.d3)}(this,function(t){"use strict";var a=function(){function a(h){i=h;var c=e+2*o+2*p+e*d,l=n+2*o+2*p,u=h.append("svg").attr("class","svg canvas").attr("width",c).attr("height",l).attr("shape-rendering","auto"),f=u.append("defs");f.append("clipPath").attr("id","wrapperClipPath_qwpyza").attr("class","wrapper clipPath").append("rect").attr("class","background").attr("width",e).attr("height",n),f.append("clipPath").attr("id","minimapClipPath_qwpyza").attr("class","minimap clipPath").attr("width",e).attr("height",n).append("rect").attr("class","background").attr("width",e).attr("height",n);var m=f.append("svg:filter").attr("id","minimapDropShadow_qwpyza").attr("x","-20%").attr("y","-20%").attr("width","150%").attr("height","150%");m.append("svg:feOffset").attr("result","offOut").attr("in","SourceGraphic").attr("dx","1").attr("dy","1"),m.append("svg:feColorMatrix").attr("result","matrixOut").attr("in","offOut").attr("type","matrix").attr("values","0.1 0 0 0 0 0 0.1 0 0 0 0 0 0.1 0 0 0 0 0 0.5 0"),m.append("svg:feGaussianBlur").attr("result","blurOut").attr("in","matrixOut").attr("stdDeviation","10"),m.append("svg:feBlend").attr("in","SourceGraphic").attr("in2","blurOut").attr("mode","normal");var g=f.append("radialGradient").attr("id","minimapGradient").attr("gradientUnits","userSpaceOnUse").attr("cx","500").attr("cy","500").attr("r","400").attr("fx","500").attr("fy","500");g.append("stop").attr("offset","0%").attr("stop-color","#FFFFFF"),g.append("stop").attr("offset","40%").attr("stop-color","#EEEEEE"),g.append("stop").attr("offset","100%").attr("stop-color","#E0E0E0");var v=u.append("g").attr("class","wrapper outer").attr("transform","translate(0, "+p+")");v.append("rect").attr("class","background").attr("width",e+2*o).attr("height",n+2*o);var w=v.append("g").attr("class","wrapper inner").attr("clip-path","url(#wrapperClipPath_qwpyza)").attr("transform","translate("+o+","+o+")");w.append("rect").attr("class","background").attr("width",e).attr("height",n);var y=w.append("g").attr("class","panCanvas").attr("width",e).attr("height",n).attr("transform","translate(0,0)");y.append("rect").attr("class","background").attr("width",e).attr("height",n);var E=t.zoom().scaleExtent([.5,5]),x=function(){var t=w.property("__zoom").k,a=c,r=l,i=e,o=n;E.translateExtent([[-i/t,-o/t],[i/t+a,o/t+r]])},z=function(){y.attr("transform",t.event.transform),(t.event.sourceEvent instanceof MouseEvent||t.event.sourceEvent instanceof WheelEvent)&&s.update(t.event.transform),x()};E.on("zoom",z),w.call(E),s=r().host(a).target(y).minimapScale(d).x(e+p).y(p),u.call(s),a.addItem=function(t){y.node().appendChild(t.node()),s.render()},a.render=function(){f.select(".clipPath .background").attr("width",e).attr("height",n),u.attr("width",e+2*o+2*p+e*d).attr("height",n+2*o),v.select(".background").attr("width",e+2*o).attr("height",n+2*o),w.attr("transform","translate("+o+","+o+")").select(".background").attr("width",e).attr("height",n),y.attr("width",e).attr("height",n).select(".background").attr("width",e).attr("height",n),s.x(e+p).y(p).render()},a.reset=function(){E.transform(y,t.zoomIdentity),u.property("__zoom",t.zoomIdentity),s.update(t.zoomIdentity)},a.update=function(t){E.transform(y,t),w.property("__zoom",t),x()},x()}var e=500,n=500,i=null,o=0,s=null,p=10,d=.25;return a.width=function(t){return arguments.length?(e=parseInt(t,10),this):e},a.height=function(t){return arguments.length?(n=parseInt(t,10),this):n},a},r=function(){function a(h){n=h;var c=t.zoom().scaleExtent([.5,5]),l=function(){var t=f.property("__zoom").k,a=parseInt(i.attr("width")),r=parseInt(i.attr("height")),n=e.width(),o=e.height();c.translateExtent([[-n/t,-o/t],[n/t+a,o/t+r]])},u=function(){if(m.attr("transform",t.event.transform),t.event.sourceEvent instanceof MouseEvent||t.event.sourceEvent instanceof WheelEvent){var a=t.event.transform,r=t.zoomIdentity.scale(1/a.k).translate(-a.x,-a.y);e.update(r)}l()};c.on("zoom",u);var f=h.append("g").attr("class","minimap");f.call(c),a.node=f.node();var m=f.append("g").attr("class","frame");m.append("rect").attr("class","background").attr("width",o).attr("height",s).attr("filter","url(#minimapDropShadow_qPWKOg)"),a.update=function(a){var r=t.zoomIdentity.scale(1/a.k).translate(-a.x,-a.y);c.transform(m,r),f.property("__zoom",r),l()},a.render=function(){f.attr("transform","translate("+p+","+d+")scale("+r+")");var e=i.node().cloneNode(!0);e.removeAttribute("id"),n.selectAll(".minimap .panCanvas").remove(),a.node.appendChild(e),t.select(e).attr("transform","translate(0,0)"),m.select(".background").attr("width",o).attr("height",s),m.node().parentNode.appendChild(m.node())},l()}var r=.15,e=null,n=null,i=null,o=0,s=0,p=0,d=0;return a.width=function(t){return arguments.length?(o=parseInt(t,10),this):o},a.height=function(t){return arguments.length?(s=parseInt(t,10),this):s},a.x=function(t){return arguments.length?(p=parseInt(t,10),this):p},a.y=function(t){return arguments.length?(d=parseInt(t,10),this):d},a.host=function(t){return arguments.length?(e=t,this):e},a.minimapScale=function(t){return arguments.length?(r=t,this):r},a.target=function(t){return arguments.length?(i=t,o=parseInt(i.attr("width"),10),s=parseInt(i.attr("height"),10),this):i},a};return{minimap:r,canvas:a}});

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 960px;
  height: 500px;
  position: relative;
}

</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
<script>
  require.config({
    paths : {
      'd3' : 'https://d3js.org/d3.v4.min.js',
      'd3Minimap': 'd3-minimap.min.js'
    }
  });
requirejs(["d3", "d3-minimap"], function(d3, d3Minimap) {
  var canvasWidth = 800;
        
  var canvas = d3Minimap.canvas().width(435).height(400);
  d3.select("#canvasqPWKOg").call(canvas);
            
  d3.select("#resetButtonqPWKOg").on("click", function() {
    canvas.reset();
  });         
  d3.xml("https://gist.githubusercontent.com/billdwhite/496a140e7ab26cef02635449b3563e54/raw/50a49bfbcafbe1005cba39a118e8b609c4d4ca29/butterfly.svg",function(error, xml) {
    if (error) throw error;
    addItem(xml.documentElement);
  });         
            
  function addItem(item) {
    canvas.addItem(d3.select(item));
  }                                         

});
</script>

<h5 class="title">Use mousewheel to zoom. Drag image or minimap rectangle to pan.</h5>

<div id="canvasqPWKOg" class="canvas"></div>
<button id="resetButtonqPWKOg">Reset</button>

preview.png

thumbnail.png