I'm just trying to plot a function in javascript by using the d3.js library. I need to add the zoom and pan events. I've done it by following this example:
http://bl.ocks.org/mbostock/7ec977c95910dd026812
I've drawn some lines on this plane.
My problem is that when I zoom it, the linewidth changes too.
What I like is that line still having it's original width when zooming. I think I have to redraw it, but I'm not sure if this is the best way.
Can you tellme if there is a better way of doing this, or show me any simple example?.
Thank you!
As you have not supplied any code it is a bit hard to tell. From your description the grid lines you are rendering are being transformed by the zoom matrix.
You can either draw the grid independently of the zoom but you will have to switch between zoomed and grid transforms and will require more code or just re-render the grid lines with the width set to the width times the inverse scale. Eg if your grid lines are two pixels then you can can keep them that width by setting their render width to 2*(1/scale) which is the same as 2/scale. Scale being the amount of zoom. The same applies to any objects you wish to keep at a fixed render size.
There is no easy way to avoid re-rendering the gridlines
This is what I was looking for:
http://www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke
Related
Using geojson.io page I want to draw some districts/countries.
I'm drawing each district separately as there is no multipolygons in Leaflet Draw. However when I'm drawing the borders even with maximum zoom - the borders will never be exactly the same. Coordinates will differ to some extend which is natural. Hence when I am downloading the data in topojson , the data are not valid to display meshes between different districts
How to achieve the goal to have the borders always with the same coordinates?
For example it could be achieved by having the markers visible during drawing and just picking up the one I'm interested in(on a same border) by mouse click - the same way the shape is finished.
I have downloaded the source code, read it (it is nice), searched through docs and thinking how to adjust it for my goal but I'm lost :/
Leaflet.Snap did the trick.
I was afraid that snapping will be not exact for the borders but it is :)
I try to process dynamic 2d rainfields (comparable to this, just that I process the data dynamically and animate it).
Until now I found that the best fitting solution for my project is creating horizontal LineSegments, so I can process the data set line by line and give each LineSegment a color. I store everything I need in a BufferGeometry.
Now my problem is
that when I implement a zoom by simply reducing the z-index of the camera, the spaces between those lines become visible, because the lines dont become thicker.
I read that the linewidth-parameter of a LineSegment object is inaccessible on Windows so is there any other way I could try?
Is there a way to create a horizontal bar chart (or modify the row chat)?
The row chart does almost what I want, however I want the y axis to be a continuous variable and it seems the row chart defines the y axis in terms of discrete/ordinal variables.
I was also thinking about rotating the svg with d3. (Rotating the whole div worked, however the brush effect did not rotate too).
I was thinking:
dc.renderAll();
d3.select("body").select("#barChart3").select("svg").attr("transform", function(d) { return "rotate(90)"});
however that erased the whole chart rather than rotating it.
Any suggestions?
Update:
I am having some success with rotating the svg (the brush works), however the graph is being cut off and I can't figure out why...
The two charts are completely different codebases and have different features. The Y axis of a row chart does not even use a scale, so you are quite right that it can't be made continuous in its present form.
It is an eventual goal to merge them, but for now I think rotating is your best bet.
As for the clipping problem you're having, look for the clip-path attribute on the generated SVG. It would need to be rotated as well, but for a quick fix you can probably remove it.
I have a regular grid with Pan+Zoom where I draw squares in subsequent orders, when a user click on a button, e.g.
However, if I zoom-in before adding a new item, it gets added to wrong position, i.e.
Demo of the issue http://jsbin.com/dewiq/2/edit
Any ideas?
You're mixing up two different ways of zooming in d3 -- zooming with scales ("semantic" zooming) and zooming with transforms ("geometric" zooming). See this answer for a detailed breakdown of the differences.
You've attached your scales to the zoom behaviour, so when you zoom or pan your scales get modified to reflect the change. However, you're only using that modification to redraw the axes, for the plot you're creating the zoom effect with a geometric transformation. That works until you try to redraw any of your plot (or, draw a new shape). When you do that, the modified scales and the transformed plot add together to double the zoom and pan effects, resulting in shapes that are out of position with the axes.
The solution is to simply do one or the other. Either connect your scales to the zoom behaviour, and then use those scales to redraw all your shapes after every zoom event; or use transformations -- but then your axes won't automatically change the tick spacing as you zoom in and out.
I am trying to use webgl-surface-plot to give a 3D surface plot of data. At several orientations, the axes labels get clipped. At other orientations, part of the graph gets clipped. Is there a way to expand the canvas size and/or move the axes labels closer to the axes?
You can change the default scale/zoom in the code and then just increase the canvas dimensions via the input options. I plan to add the starting zoom as an option to the chart, when I get a chance. I want to fix the axis labels as well. Currently they are at a fixed distance from the axes. They should, instead, be at a distance dictated by the length of the tick labels. Fixing this will be quite tricky, though.