I'm using the Victory library to draw a line chart in React, but it seems to draw lines with different widths depending on whether the line is straight or is at an angle.
Screenshot of the line it's drawing:
In the screenshot, the dots are drawn using VictoryScatter and the line(s) using VictoryLine. I noticed that VictoryLine draws using path, so is this a limitation of SVG's path to draw like this? Because this seems weird to me!
This is happening because of the order or rendering of the SVG components. The ones at the top and the bottom appear to be thinner because they are rendered behind the axes (this is explained here)
I'm not sure why, but changing the order didn't work for me, so I had to use VictoryPortal to bring my components to the front.
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 :)
Found this wonderful library to draw lines on webpage
http://www.walterzorn.de/en/jsgraphics/jsgraphics_e.htm
I actually worked fine for me on page for drawing the line.But, i want to show arrow at one end of the line. I could not find it the library [i think], so can anybody suggest me on the same.
You can still use this library. Just draw three lines with the same first coordinates, but different second coordinates, calculated using rotation and scale transformations.
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?
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 have a temperature line graph, and I want to draw a red vertical line when the two temperatures (surface temp and dew point) cross. So far what I do is I draw a vertical rectangle on top of my graph at places I calculated it crosses.
It works correctly, but there are a few downsides to this :
The line kind of stands out of the graph ... we can tell I added it later and not in the graph itself;
The pixels are hardcoded, if I change the graph width it might not be good (I could probably fix this, but still)
I would like a little tooltip when I highlight a line, but since it's a simple rectangle, it just sits there and is not dynamic at all.
What would be my best option to integrate this line better un my graphs?
Thanks!
plotLines are your best way to draw the line - http://api.highcharts.com/highcharts#xAxis.plotLines
Two things:
1) The difficult part will be calculating where the lines cross. if they do not cross at a data point, which they most likely won't, there will need to be some guesswork involved, as there is no value you can retrieve from the chart to tell you the axis value where they cross.
2) if you are using separate y axes for these two series, which I assume you must be since they are completely different units and scales, then the point where the lines cross will be COMPLETELY arbitrary and meaningless, as where they cross will be strictly a matter of how the scaling for each axis is set up, and the values have no actual correlation to each other.