search

d3 / d3-zoom

Pan and zoom SVG, HTML or Canvas using mouse or touch input.
https://d3js.org/d3-zoom
ISC License
505 stars 143 forks source link

Define a zoomable area #164

Closed nitely closed 5 years ago

nitely commented 5 years ago

By an area I mean some portion of a svg, for example half of it. Currently, the only way to zoom an area within a svg is to create a child element (i.e a rect). However, this is not always possible since there might be some other elements in it, thus creating a rect over them would make them to stop receiving events (i.e: click). So, the only way to apply a zoom over such a visualization is to apply it to the svg itself, but since mouseover, etc are relative to the svg, the [mouse] position won't align properly (to say, half of the svg). This causes glitches mentioned in #87

nitely commented 5 years ago

Sorry, I should have added a test case. I'll re-open this later

nitely commented 5 years ago

nvm, If I set a initial translation to the zoom state it works as expected. For example to keep the zoom in sync with the brush (as in https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172):

// function brushed() ...
svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
      .translate(paddingLeft, 0)
      .scale((width - paddingLeft) / (s[1] - s[0]))
      .translate(-s[0], 0));

When applying an initial zoom it requires just the translate bit:

svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
      .translate(paddingLeft, 0);

This won't prevent the rest of the svg from receiving all the zoom events, though.