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?
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 am working on a panorama site and want to be able to add a text label that can be dragged to the right location. It is a spherical pano for what it is worth :) The next 4 paragraphs are good info in general, especially if you are stuck like I was, but the real question starts below the +++
I originally tried using the regular canvas trick, but the canvas was too large vertically. For instance if I wanted to say "Hello World" that might be 120px wide and 15px tall, but the "transparent" canvas would be 150px tall, which would overlap other text objects, but not the panorama.
The other issue was if I wanted it to be more than a single line, so for instance if I wanted to say "Did you see this cool stream?" that could be broken up into 2-3 lines. After playing with it I got wordwrapping to work on both the canvas and the sprites, but ultimately the canvas problem killed it for me.
After that I tried Sprites, which was better about not overlapping visually the other text objects, but the canvas size was still too large which created issues in the onMouseOver intersects where if it was too close together you were likely to start dragging the wrong one around, or if you just wanted to pan / tilt the camera around to look at the panorama you may inadvertently click on the oversized canvas.
I tried multiple times to get the TextGeometry working, but always got this error "THREE.TextGeometry: font parameter is not an instance of THREE.Font." till I finally found out the API changed in the latest version which made all the examples on the web useless. After I found out about the API change, I was able to get it working, here is a fiddle for anyone that needs it: https://jsfiddle.net/287rumst/1/
++++++++++
In my app, this previous example using TextGeometry works out just fine, but only when it is a single line. When I loop through and do the next line, it becomes an extra object that you drag around individually, which becomes a problem when I want to be able to click on it to edit the text, size, color and so on.
I am not sure what to do about the issue of dragging all lines as a group. I expected it to work when I added the group to the objects array, which is how I did it before with the lines, but it doesn't work, so I was thinking it would be great if it could be wrapped in a transparent box with the faces pressed against the side and then use the transparent box as the handle for dragging.
Here is the example of it working with wordwrap: https://jsfiddle.net/ajhalls/73dhu192/
Outstanding issues would be dragging the group, and causing it to face the camera from the center of the group, rather than the corner when being dragged. group.geometry.center() I would have thought would work, like it does when it is a single line, but again it has issues.
I need to be able to draw links between the circles in a circle pack layout, like {source: i, target: j}. I've seen some questions about how to combine this layout with the force layout that made me think It could be a way to achieve this but I haven't had any luck on that path, also what I need is something completely static. Thank you in advance for any suggestions.
I finally could draw lines between nodes by appending them to the svg and calculating each line position based on the radius of the nodes that each line were to connect, but the problem was that the pack layout that I'm using is zoomable, so when I tried to zoom by clicking the lines neither translate nor re-sized (of course, since there was no code performing such things), so I tried to implement a translation function for the lines so they would move along with the zoom, then I saw that it would take some serious geometry to achieve this, so since I'm a lazy programmer and not at all experienced with d3 I tried to come with something more simple... at last I decided to represent the links between the nodes with a different approach (without lines), I used the "mouseover" event so when the pointer is over a node it will highlight (changed circle stroke attribute color and width) the nodes connected to it. This way I achieved my goal and the view looks a lot cleaner without all the lines crossing over it (they were a lot). I know that some may think that this does not answer the original question, and I'm sure that this can be achieved by someone with more experience (and time and patience) using lines and implementing the right calculation, but in my case this solution solves my problem and maybe it could be of help to others.
I need a Time Line For My Web Project.
Something like this - I read the code of this Time Line but did not understand it because it is not documented enough.
My problem is the math behind all of this (not the interaction with the canvas).
I have read several articles about the math of the scroll bars, but none of them talk about zoom.
Some
articles suggest to hold canvas element with very large width value - and to display just the
View Port.
I don't think that's the right way to do it - I want to draw just the correct viewport.
In my project, I have array of n points.
Each point holds time value represented in seconds, but not all of the points are within the Viewp Port.
Considering the current zoom level, how do I calculate:
What points should be drawn and where to draw them?
What is the size and position of the thumb?
Any articles / tutorials about such a thing?
You might be able to use something like Flot which handles the placement of points, as well as zooming and panning. Here's an example of that.
There are a bunch of other drawing libraries, here a good list.
You always have Raphealjs.com , one of the most used library to play with SVG, with this you can write your own js to generate the timeline.
I am writing an app that uses Highcharts, and in one instance I want to have a "slider" at the bottom of the chart that extends up vertically over the chart. Moving the slider will update other parts of the page based on where the user moves the slider on the chart.
The problem is that when drawing anything on top of the Highchart (image or a div) the performance becomes absolutely unacceptable. The slider simply cannot keep up with the mouse movements See a jsfiddle here. Note - this only happens when working with a large number of data points (which is absolutely unavoidable in my case).
Is there anything that I can do, short of not drawing on top of the chart?
I suspect the slowness is because the browser has to redraw the chart (either the whole thing or parts of it) as the div slides over it. With a large data set to redraw the chart from, this becomes annoyingly slow.
There are solutions, but not all of them are always acceptable:
You can try reducing the number of points in your data set by sampling it at a lower rate.
You can try windowing, so that the viewer only shows a range within the entire set. For example, if you have 10,000 data points your window can slide along the data set, showing only 1,500 points at a time as opposed to all 10,000 points.
Move to a different technology such as Flash or Silverlight.
Like I said, though, not all of these or even any of them will work for you.
I noticed that when you drag the slider over the graph it still highlights the datapoints. You probably should set pointer-events:none on that part of your chart while dragging the slider, that will allow browsers to not check pointer-events in that subtree (which if you have a lot of datapoints can be somewhat expensive, especially if you update these elements on hover).