OpenLayers 3: align/rotate labels with line features - text

Is it possible to align/rotate text labels to a line feature? For example, if a line runs southwest to northeast (45 degrees), then the text placement should also be 45 degrees? Is this possible? I did look through the OL documentation but couldn't find anything of this nature.

You can't make a label "follow" a line in OpenLayers 3, but you can rotate it. See in this example: http://openlayers.org/en/latest/examples/vector-labels.html
Try setting the "Rotation" then hit the refresh button and you'll see the label being rendered on that angle.
If you use a style function, you could calculate the average angle of the line to determine the angle to render its label.

Related

Android plot demo app orientation sensor example history plot line thickness

I have been unable to alter the plot line thickness for the History plot in the Orientation sensor Example (OrientationSensorExampleActivity.java)
None of the other queries about line thickness seem to be with the FastLineAndPointRenderer.
Is there an easy way to do this?
I need to make the plot lines thinner (a 100th of the overall height)
Thanks
Dean
The thickness of all lines in Androidplot are controlled by an instance of Paint. In the case of lines drawn by a Renderer (of any kind), it's the formatter that will contain the Paint instance.
Here's an example of setting the line thickness for a formatter used to draw a series with FastLineAndPointRenderer:
FastLineAndPointRenderer.Formatter formatter = new FastLineAndPointRenderer.Formatter(Color.RED, null, null);
formatter.getLinePaint().setStrokeWidth(PixelUtils.dpToPix(3));
plot.addSeries(azimuthHistorySeries, formatter);

How can I change width of a line without changing its stroke width in inkscape?

I am new to inkscape and I would like to know if there is anyway to increase/change the width of a line without changing its stroke width.
I want the line to have a fill color and a narrow black stroke (preferably 2px).
Thanks
You can convert a thick-stroked curve using the Stroke to path command (in the Path menu): this won't change its aspect, but instead of being defined as a line with a given width, this will give a polygonal shape (a sort of ribbon). Then you can give this ribbon a stroke colour and thickness (Shift-click on the chosen colour).
In the Inkscape version 1.0 there are four buttons on the right side of the toolbar. The first one is responsible for enabling of scaling the stroke while changing the width of an object. Click it to disable this kind of scaling.
There's a small trick to change the width line as Inkscape doesn't provide a mechanism.
Close the current file in Inkscape
Edit your file in a normal ASCII Editor
Find your object (e.g. a spline), it will be a path ... statement
Change the "stroke-width" manually e.g. as
<path style="fill:none;stroke:#80ffff;stroke-width:0.164583px; ....
Tip: If you have a large file, you can assign your object a unique color (here 80FFFF) and you can then search that color code "80FFFF" in your ASCII Editor.

D3.js change x-axis path line style

In d3.js charts, the x-axis line (black line between the bars and bar labels) sort of looks like this by default: |----------------|, see screenshot below:
How would I change this to just a straight line (no vertical lines on either end)?
Looking at the generated SVG, this code seems to be determining that style: <path class="domain" d="M0,6V0H824V6"></path>, which is auto-generated by D3.
Thanks!
This is controlled by axis.outerTickSize():
An outer tick size of 0 suppresses the square ends of the domain path, instead producing a straight line.
All you need to do is set axis.outerTickSize(0).
Lars Kotthoff's answer is still valid for d3 versions prior to 4.x, with version 4 it changed to axis.tickSizeOuter(). Note that tickSize() modifies the outer ticks as well, which means the order of calling tickSize() and tickSizeOuter() is important.
d3.axisBottom(xScale)
.tickValues(series)
.tickSize(5)
.tickSizeOuter(0)
);

Implement ToolTip feature in Line Chart

I Have implemented a Primeface 3.5 line chart.I have also added the tool tip feature.
Now I want is that , if I click on the coordinate , it should show me the origination of those points.
eg:
The highlighted coordinate 2006 is summation of (1000 + 1006), so when I place my cursor on the point it should show me (1000+1006).
How do I implement the feature?
as short of reputation I could not upload the image to explain it
In jqplot attributes, you can specify to show the value on x axis, y axis or both in tooltipAxis attribute.
Alternatively, you can bind a javascript function with a jqplot event jqplotDataHighlight to show a custom value on mouse hover.
See this answer

Can you right-align an SVG rectangle?

I'm using Raphael to draw rectangles. Whoo-hoo!
Is there a way to right align contents of an SVG file?
Not just text, but shapes as well?
I can do the math and get the computed x value, but I'm looking for the lazy-simple solution.
Thank you.
There isn't. Unlike normal web pages where the window is resized and the content flows into it, when a Raphael paper is resized, there is no sort of flow, so aligning is irrelevant. Instead of setting align=right, you just set the right edge to be the same position you set the width of the paper to be. If you enlarge the paper, you can scale the contents with a single operation. Once you've set the position of the right edge, you've essentially set the align position. You don't need to re-set all edge values when the paper changes size, you just scale everything with one command. Hope that helps

Resources