I am trying to figure out how to create different zoom factors on the X- and Y-axis in d3. It seems to be created with a single zoom-factor for both axis, and basically I would like to know if there is a way to separate them.
The basics is simple enough: There is excellent support in d3 for an even zoom-effect on x- and y-axises. It is also easy to turn off the zoom for one axis. But I cant find a way to create this intermediate effect. The goal is to have the y-axis zoom 10 times more than the x-axis for each mouse wheel zoom-event.
I have no actual code to show, since I dont know if it is possible. Perhaps a useful hint, is that I work with D3 version 5. The usual, more or less standardized zoom code is used.
Related
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
Maybe it's just me.
I spent a couple months learning Javascript just to be able to use D3.js, and enjoyed making fairly complex geometric shapes for intellectual exploration, but then I found a dirty secret.
Even though the math is correct and D3 seems to handle it, there are NO perfectly accurate SVG viewers.
For a quick example of this, create two circles with their centres r * 2 width apart with a radius of r.
Zoom in without recalculating the viewport.
Eventually, the circles will either look like they overlap or not touch at all.
Example with 6 circles, all r * 2 distance apart.
For reference, these screenshots were taken from Affinity as I could not figure out how to get D3 to do this. To Serif Labs' credit, they did make code changes to make rendering at zoom more accurate, and those changes reduced the space to about 1/4 of what it was.
100%
400%
100000% (centre of the image)
I'm using d3 v4 to draw a collapsible tree - see here
I'm setting the translateable world using translateExtent but when you zoom in or out, the translateable world doesn't adjust. You can see in my example (lines 479-514) I've attempted to fix this by multiplying by the scale or dividing by scale where appropriate but that hasn't worked. (The ideal is that when you move at any point there is always one 'card' visible - it works at 1x zoom).
Another complication is that the top node of the tree needs to be centralised in the browser, so everything is offset relative to that.
I've seen a few other mentions that translateExtent doesn't work with zooming in or out but wondered if anyone had managed to get it to work?
I have a set of polygons where the position of their vertices (corners) are defined as latitude/longitude values.
I want to use D3 to draw these. I don't want anything fancy (like a background containing the world map, etc). The only thing I want to do is to draw the polygons.
I have looked up on Google for a solution, but what I find is things like http://datamaps.github.io or https://github.com/mbostock/d3/wiki/Geo-Paths and they all show a background of the world map or the like which is what I don't want to do.
Suggestions are welcome.
In your particular case, using the geo functionality of D3 seems like overkill -- all you need to do is use the D3 scales to convert the coordinates to screen coordinates, i.e.
var scale = d3.scale.linear().domain([minCoord, maxCoord]).range([minScreen, maxScreen]);
Demo (based on provided fiddle) here.
So I am using jqPlot to display distance (y-axis) over time (x-axis) in a simple line graph.
However, while I have actual distances as the underlying data used to position the points, I'm not interested in displaying those distances on the y-axis.
Instead, there are a series of landmarks at given distances, that I want to appear on the y-axis as a 'tick' next to the appropriate point for the distance to that landmark. That way the line appears to "pass" each landmark as it travels upward.
Currently I'm "faking" this by hiding the ticks and putting a manually-created series of labels next to the graph. This works well enough, but I had to disable vertical zooming because if the user chose to zoom in, the labels would not match up with the actual distances. My users would really like to zoom in vertically, however, and I want to allow them to.
Therefore, does anyone know of a way (a plugin or similar) that would allow me to associate custom labels with given tick marks in jqPlot, that will match up nicely and respond to zooming? It would be necessary to hide some of the landmarks if the graph is zoomed out too much, so that would have to be a feature.
Alternatively, if someone knows of a "zoom event" that passes in the min and max y values, I could probably recreate my manual labels with that data, so let me know if you know of a way to get that information. I haven't been able to find one.
I would need to see a bit of your code to customize it to the distance but to start with you could label the ticks and it will display over the size of the chart.
axes:{yaxis:{ticks:['DiscanceA','DiscanceB', 'DiscanceC', 'DiscanceD', 'DiscanceE'],
renderer: $.jqplot.CategoryAxisRenderer,},
Let me know how it goes and if you have any code lets see it!