Consider this code example in d3 version 4.
There's a number of yellow circles overlaid on top of a black background.
I can drag the circles around with my mouse. I can also zoom in and out using the mousewheel, providing my mouse is not over a circle.
There's two problems that I'd like to fix:
I would like to zoom in when I hit the scroll wheel while I am moused over a circle.
Drag and drop is incorrect when I am zoomed in or out of the graph - the circles don't follow the mouse.
Solved it. Here's the link to the gist with the solution.
How I fixed each problem:
The zoom problem was fixed by making the zoom handler trigger on the underlying SVG element, not an overlaying rectangle like it was previously.
The drag problem was fixed by adjusting the drag function to take into account the current level of zooming
Related
I'd like to combine brushing and zooming on the same chart. So far I can brush, and I can zoom. What I can't do is brush then zoom, or zoom then brush. Once I do either of these combined actions, any brushed area becomes mis-matched with the actual bars that are "selected".
For the visualization I'm creating, all bars are selected by default (selected bars are blue). These are the use cases I'd like to support:
Zoom into an area on the chart and brush to select some bars
Brush to select some bars, then zoom into that area and refine the selection so that it's right up against the bars I'm interested in.
Bonus interaction would be if the brush extents snap to the beginning and end of the closest bars.
Here's what I've got so far: https://codesandbox.io/s/zoom-and-brush-hs9lwp
TIA
I finally figured it out.
In the zoom handler, I needed to update the brush if it's drawn. I did this by getting the existing selection extent, then rescaling those points, then move the brush to the new coordinates.
In the brush handler, I just needed to use a copy of the original scale that has been updated for any zooming performed.
There's probably a better way, especially the zoom handler part, but this works for now. If anyone has a better/cleaner way of doing this, please let me know.
Updated example at: https://codesandbox.io/s/zoom-and-brush-forked-pr1g3c
I am trying to implement zooming and Linking&Brushing in Bubble chart.
Aplaying linking and brushing while data are still on initial position works just fine. Also zooming alone works just fine.
But if I zoom the chart and then i try to select the data, then it's not selecting the right ones.
Example:
Brushing while zooming is not applied
Bushing after zooming was applied
I am using brush.extent() to get the position of brushing space. Somehow the position of dots is never updated, while zooming.
I can take under consideration the scale size while I am brushing. But I am asking if there is something which updates the dots position after zooming automatically. Or am I missing something as I am pretty new at using d3.js and also on visualization field.
If anyone is facing the same error, maybe my solution will be helful.
While brushing I add the translate values to the x and y coordinates.
d3.event.translate
I've built a map where on hover over of a certain (x,y) coordinate point, a zoomed in mini-map shows up to the side with the hovered point in the center (using code similar to: http://bl.ocks.org/mbostock/2206590). It works well, but a bit inefficient because it is redrawing the whole map with a new scale and translate every time which I noticed when I took off overflow: hidden from the mini-map in IE.
Is there a built-in way in d3 or TopoJSON to filter map features to only keep those that fall within the bounding box of the zoomed in area?
Thanks!
By default Blender adds speed easing to the animation. I need to remove it to get consistent rotation speed on my model. How/Where can I modify ease curve?
Thanks
You are able to edit the key frame interpolation in the graph editor. Select your object and then choose the graph editor in the selection box at the bottom left of the screen. You can then zoom out using the scroll wheel to see the curve. You are able to edit the points by clicking them with the right mouse button and moving them with the left.
I am trying to calculate the correct mouse coordinates, in user coordinate space, in an SVG document from within Javascript code when scrollbars come into existence when that SVG file is viewed from within FireFox. But it is not quite correct. This is needed to get SVG-based tooltips drawn correctly even when the SVG is scrolled horizontally or vertically.
I desire to have the coordinate transformations be correct across IE and Firefox browsers. Also, I want to do this with a single-source Javascript+SVG solution that hopefully does not require browser-specific conditional code. I am currently using FireFox 3.5.10, but I would consider upgrading to a more recent version of FireFox, and I have not tested IE yet.
The problem I ran into is the coordinate offsets for the scrollbars: The mouse coordinate transformation is not sufficient when scrollbars come into existence over the SVG element inside Firefox. As a debugging aid to figure out the coordinate transformations, I am working with a simple SVG file that contains Javascript handlers, all in one file, that simply draws crosshairs at the mouse cursor as SVG line objects. Find it posted at svg_cross_hairs.svg. If you load that file into FireFox and shorten the FireFox window down until scrollbars appear, and then scroll either the vertical or horizontal scrollbars, you will find that the crosshairs drawn by the Javascript are offset by the amount of either horizontal or vertical scrolling amount, which is not correct in order to draw a tooltip object on or near where the mouse cursor actually is.
I do see the Firefox: Get mouse coordinates of top-left corner of viewport question that talks about the scrollTop property.
msg#00056 clarifies that there is confusion of the meanings of element.{pageX,pageY,clientX,clientY} attributes and the element.getscreenCTM method.
Is there a cleaner way to arrive at the correct mouse coordinate, in the in user coordinate system?
You can use evt.pageX / evt.pageY or window.pageXOffset / window.pageYOffset to arrive at something that works even if the svg is scrolled.