diff --git a/README.md b/README.md index cc5e259a..b4d20f23 100644 --- a/README.md +++ b/README.md @@ -126,6 +126,7 @@ Returns a new graphviz renderer instance on the first element in the given *sele | useWorker¹ | true | | [width](#graphviz_width) | null | | [zoom](#graphviz_zoom) | true | +| [zoomScaleExtent](#graphviz_zoomScaleExtent) | [0.1, 10] | ¹ Only has effect when the graphviz renderer instance is created. @@ -332,6 +333,10 @@ A demo of shape tweening can be seen [here](http://bl.ocks.org/magjac/69dc955a2e If *enable* is true (default), enables panning and zooming, else disables panning and zooming. The zoom behavior is applied to the graph's top level svg element. +# graphviz.zoomScaleExtent([extent]) [<>](https://github.com/magjac/d3-graphviz/blob/master/src/zoom.js "Source") + +Sets the scale extent to the specified array of numbers [k0, k1] where k0 is the minimum allowed scale factor and k1 is the maximum allowed scale factor. The scale extent restricts zooming in and out. For details see [*zoom*.scaleExtent](https://github.com/d3/d3-zoom#zoom_scaleExtent). + # graphviz.resetZoom([transition]) [<>](https://github.com/magjac/d3-graphviz/blob/master/src/zoom.js "Source") Restores the original graph by resetting the transformation made by panning and zooming. If *transition* is specified and not null, it is taken to be a transition instance which is applied during zoom reset. diff --git a/examples/basic-zoom-fit-window.html b/examples/basic-zoom-fit-window.html index c85c359b..371c3dee 100644 --- a/examples/basic-zoom-fit-window.html +++ b/examples/basic-zoom-fit-window.html @@ -10,6 +10,7 @@ margin = 20; // to avoid scrollbars graphviz = d3.select("#graph").graphviz() + .zoomScaleExtent([0.5, 2]) .attributer(attributer) .renderDot('digraph {a -> b}'); diff --git a/src/graphviz.js b/src/graphviz.js index a872c50f..c4222154 100644 --- a/src/graphviz.js +++ b/src/graphviz.js @@ -24,6 +24,7 @@ import tweenPrecision from "./tweenPrecision"; import growEnteringEdges from "./growEnteringEdges"; import zoom from "./zoom"; import {resetZoom} from "./zoom"; +import {zoomScaleExtent} from "./zoom"; import on from "./on"; import onerror from "./onerror"; import logEvents from "./logEvents"; @@ -50,6 +51,7 @@ export function Graphviz(selection, options) { tweenPrecision: 1, growEnteringEdges: true, zoom: true, + zoomScaleExtent: [0.1, 10], width: null, height: null, scale: 1, @@ -167,6 +169,7 @@ Graphviz.prototype = graphviz.prototype = { growEnteringEdges: growEnteringEdges, zoom: zoom, resetZoom: resetZoom, + zoomScaleExtent: zoomScaleExtent, render: render, dot: dot, renderDot: renderDot, diff --git a/src/zoom.js b/src/zoom.js index 66685ca2..c3923bc0 100644 --- a/src/zoom.js +++ b/src/zoom.js @@ -26,7 +26,7 @@ export function createZoomBehavior() { return this; } this._zoomSelection = svg; - var extent = [0.1, 10]; + var extent = this._options.zoomScaleExtent; var zoomBehavior = zoom() .scaleExtent(extent) .interpolate(interpolate) @@ -89,3 +89,10 @@ export function resetZoom(transition) { return this; } + +export function zoomScaleExtent(extent) { + + this._options.zoomScaleExtent = extent; + + return this; +} diff --git a/test/zoom-test.js b/test/zoom-test.js index 5ead10ea..8a438a79 100644 --- a/test/zoom-test.js +++ b/test/zoom-test.js @@ -175,3 +175,17 @@ tape("zooming rescales transforms during transitions.", function(test) { test.end(); } }); + +tape("zoomScaleExtent() sets zoom scale extent.", function(test) { + var window = global.window = jsdom('
'); + var document = global.document = window.document; + var graphviz = d3_graphviz.graphviz("#graph"); + var extent = [0.5, 4]; + graphviz + .zoomScaleExtent(extent) + .renderDot('digraph {a -> b;}'); + + test.equal(graphviz.options().zoomScaleExtent, extent, '.zoomScaleExtent(...) sets zoom scale extent'); + + test.end(); +});