How can a D3 brush be programmatically adjusted from extent to extent? Can it be done so it appears to be animated rather than just instantly snapping to a final extent?
For example:
[0,0] to [0,100]
Extent just expanding to the right.
d3.select('body').transition()
.call(brush.extent([0, 100]))
.call(brush.event);
http://bl.ocks.org/mbostock/6216724
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
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
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!
It appears that the ticks in axes have some sort of default transitions when zoomed or panned: https://github.com/mbostock/d3/blob/master/src/svg/axis.js
My zooming panning behavior is like in this example (except that for some reason, the transitions are much more obvious in my code, which has larger font sizes):
http://bl.ocks.org/mbostock/4015254
I would like to remove or overwrite the axis tick transitions for performance reasons. How do I do that?
I have started learning CANVAS. After i started drawing some basic shapes, i wanted to make some modifications to them. For example, I am confused of how to modify length and width of rectangle. Should i have to clear the canvas and redraw or can i capture the object of that rectangle like the objects in java script.
The canvas is a raster graphics surface. modifying length and width of a rectangle is a vector action. It is possible to scale a raster, but losses in quality can/will occur. You can use vector graphics in the form of SVG. But if it is only a rectangle, use a div with a border overlay-ed on your canvas.