D3 drag jitters when I .call(zoom) on two overlapping elements - and try to drag on the top element.
Here is an example http://codepen.io/anon/pen/WbNjqg
In this case, zoom has been registered on the chart's bars and on the chart's background.
I can't add an invisible rectangle over the entire chart to register the zoom because that element would prevent mouseovers from registering on individual bars.
Why does this shaky horizontal scrolling occur - and how can I fix it?
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'm completely new to d3. In my visualization, I'm adding tooltip to the nodes and node texts using d3 tip. But when it comes to the corners or edges, the tooltip clips from the viewing area. How do I dynamically move the tooltip's position such a way that it doesn't clip?
All of my charts scale perfectly when I resize a window, however I'm using a legend on a pie chart and it doesn't scale, only the piechart resizes.
It possible to get the legend to adjust as well?
The PieChart has some problems with automatic legend sizing, the pie may become too small when you have many items in the legend.
The solution is to make a separate container for the legend:
https://www.amcharts.com/docs/v4/tutorials/chart-legend-in-an-external-container/
In this way you can have a scrollable legend container with as many items you want that doesn't interfere with the chart container.
You could also try moving the legend on the sides, better than the standard footer position, but it works only if you don't have too many items.
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 have an XY graph with a legend that automatically resizes to fit the contents of the legend. The problem is that sometimes the legend text is such that the resizing overlaps the plot, see the image below. Is there a way to keep the legend from resizing over the plot data? In other words to confine the resizing operation to outside of the plot box?
Update: it would seem that part of the problem is the auto expand ability of the legend always expands to the left-hand side. Placing the legend on the left-hand side of the plot keeps the legend from covering the graph.
1:
You probably have moved the legend, changing it's anchor point. You can move the legend to the right side of the graph element and it should re-anchor.