97 questions
0
votes
0
answers
41
views
How to scroll down a page containing svg-pan-zoom using swipe
I have a page with a couple of SVG elements employing svg-pan-zoom, as well as text and images in the same page.
I have successfully used hammer.js to implement a pinch-zoom on the SVG elements.
On a ...
1
vote
1
answer
258
views
SVG Pan Zoom: On Click Center Group Inside SVG to the Viewport
I am using this SVG Pan Zoom Library: https://github.com/bumbu/svg-pan-zoom
I have prepared a CodePen for you: https://codepen.io/ItsBenedict/pen/vYMbjpK
If you click on a category, the group should ...
1
vote
0
answers
126
views
D3 Timeline zooming with buttons
I am new to D3 so my knowledge of how it operates is very limited. I have this code that zooms in on a timeline that I changed from horizontal to vertical, so the y-axis has the dates. This code is in ...
1
vote
0
answers
58
views
Pin non-zoomable markers on a map with svg-pan-zoom
I am trying to make a map that will contain markers at certain locations. The map is an svg file and the markers could be too. I am wondering what would be the best way to go to have pan and zoom ...
1
vote
1
answer
216
views
Limit zoom horizontally
I have a svg element, displayed in a normal div (fiddle here)
window.panZoom = svgPanZoom('#limit-svg', {
zoomEnabled: true,
controlIconsEnabled: true,
minZoom: 1,
maxZoom: 10,
beforePan: ...
0
votes
1
answer
186
views
SVG Pan only when zoomed, bigger than viewport
Expected Outcome: Unable to pan SVG if it is not zoomed and SVG remains centered. When zoomed, allow panning to its boundaries.
Problem:
Using this solution How to only allow pan within the bounds of ...
1
vote
0
answers
243
views
Get translated SVG Point with svgpanzoom
In trying to get the SVG point from the mouse in my Blazor application, im doing this in razor page
public async Task SvgElementOnMouseMove(MouseEventArgs e)
{
var point = jsInProcess3.Invoke<...
0
votes
1
answer
170
views
Using requireJS with svgPanZoom giving error: Uncaught TypeError: svgPanZoom is not a function
I have been using svg-pan-zoom library successfully with my javascript app but I now need to refactor it to use requireJS.
My util.js is:
define([
'baja!',
'jquery',
'/file/WebWidgets/js/...
4
votes
1
answer
2k
views
PanZoom catch Touch Up event
I am using Panzoom JS to zoom in on a map. It is working just the way I need it for zooming in and out on mobile and desktop. When you click on an item on the map, I grab the x/y coordinates relative ...
1
vote
0
answers
82
views
Modify Actions of Reset Control
I wanted to execute some additional code when the panzoom 'reset' option is selected by the end-user, but there is no setOnReset API. I was looking for a recommended way of executing custom code in ...
0
votes
1
answer
556
views
How to pan and zoom svg file in shiny app
I have the shiny app below in which I want to pan and zoom the .svg.
library(shiny)
library(DiagrammeR)
library(tidyverse)
# probably don't need all of these:
library(DiagrammeRsvg)
library(svglite)
...
0
votes
1
answer
2k
views
SVG elements to zoom whole SVG group on click or mouseover
I would like to use the circles within my SVG file to trigger a zoom in centred on the circle. I have got it working with a div acting as the trigger for the zoom but if I instead apply id="pin&...
0
votes
0
answers
218
views
Issue to make zoom on elements inside a svg
I am stuck in applying zoom on the elements (directed graph) generated within the svg. The original code uses the d3js v3 library and is shown below:
<!DOCTYPE html>
<html>
<head>
&...
3
votes
1
answer
2k
views
How to set up d3-zoom correctly in vue?
I have svg where I render seats of venue. All seats are grouped by sectors. I need on seat click event, zoom in those seats which are in that sector, when I click another sector it should zoom out and ...
0
votes
1
answer
280
views
Test if point outside pan-zoom bounds
I want to test if the location of a particular SVG element is inside or outside of the currently visible pan-zoom region. If it's outside then I can pan to get it just inside the corresponding border.
...