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
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 have a timeseries graph done using c3.js. When I zoom the graph the bars do not change the width and the x axis does not adopt accordingly. Is there anyway I can do that? I have tried making axis.x.tick.fit = false. The zoom in works perfectly then. But the groups of data in the graphs are getting overlapped. Any idea on what to do is welcome. Thankyou
I'm porting a D3 v3 graph widget that uses panning and zooming to v4 and got stuck on the zooming changes. The zooming API in v4 uses a different model where zooming is managed on the elements rather than a general zoom transform.
I have a lot of datapoints that get plotted on a timescale that initially intentionally clumps the datapoints very close to each other, and the user can use zooming to drill deeper into the data for more detail. In v3 when zooming in the svg line automatically adjusted with the new scale however in v4 when applying zoom scaling on the svg line I get an increases the thickness of the svg line elements rather than resolving more detail (and keeping the line thickness constant). I have no problems with scaling the x or y axis.
This behavior is expected with a scale function but not what I want. I've read the new API for zoom and can't work out what zoom function to use that would give me v3 behaviour where zooming in shows more detail in the line graph and doesn't scale up the line thickness.
In v3 D3 would zoom the svg line with the following in the zoom event handler, however this won't work in v4.
chart.select("#seriesLine" + i).attr("d", series[i].d3Line(series[i].data))
Its been a while since I wrote the original graphing widget so possibly I'm just not remembering how to setup D3 correctly, but I think I'm just not groking the new zoom function, and there are no similar zoom examples to learn from.
Any tips?
I'm trying to build a stock chart with zooming functionality using D3.js
I'm looking to start with this example here and attempt to make the zoom feel more natural for a stock chart. A perfect example is this. So the difference as far as I understand is that zoomng and panning are both locked on the Y-axis, and the only way the Y-axis moves is to autmatically fill the price range of the currently visible data.
Another noticeable difference is that zooming does not zoom into the current position of the mouse like it does in the first example.
How can the example be adjusted to work more closely as the other chart? What is the pertitent code, how should it be changed?
Setting the zoom behaviour to not affect the y-axis is simple: just don't attach your y-scale to the zoom behaviour.
In the sample code you linked to, the zoom functionality is added in this line:
this.plot.call(d3.behavior.zoom()
.x(this.x)
.y(this.y)
.on("zoom", this.redraw() )
);
That creates a zoom behaviour object/function, links it to the graphs x and y scales, and tells it to call the function returned by this.redraw() after every zoom event. The zoom behaviour automatically changes the domain of the scales on zoom, and then the redraw function uses the modified zoom. If you don't give it a y scale to modify, then zooming won't affect the y domain.
Getting the y scale to automatically adjust to the given extent of the data is a little trickier. However, remember that the zoom behaviour will have automatically adjusted the domain of the x scale to represent the extent of visible data horizontally. You'll then have to get the corresponding slice of your data array and figure out the extent of y values from it, set your y domain accordingly, and then call the redraw function (remembering that this.redraw() just returns the redraw function, to call it within another function you'll need to use this.redraw()() ).
To have the zoom be independent of the mouse position, set a center point for the zoom behaviour.
I have a map of counties in a state.
I am using the code found here http://bl.ocks.org/mbostock/2206590 to implement zooming on my map.
The original example works like this:
This works well enough, the user clicks on a state and it is zoomed and centered using the state centroid. Is it possible to use the mouse location as the point about which to zoom? It would seem easy enough, but I'm not sure how to get the mouse coordinates.
Use d3.event.x and d3.event.y instead of the computed centroid. See here.