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)
);
Related
I'm working on a project where I need to parse svg path data.
Right now we're loading an svg, looking for the path tag, and pulling out it's d attribute.
For some of the artwork we'll get path data that is made up of coordinates which we can translate into the data types we need. E.g.
But other times the d value is in a more g-code-esq format.
Like in this case I drew a rectangle, converted it to a compound path:
And when I export it and look at the svg I get a d value like this:
Which we can't easily parse for the project.
My questions are:
How do I read this second format? It doesn't seem to fit what I'm reading on MDN so I suspect there's some other documentation I need to refer to: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
For illustrator users, is there a way of changing the format when exporting?
I know that this seems like more of an art question than a programming question, but I'm trying to understand the underlying reasoning behind the svg data structure so I can better parse it.
Oh! Oh ok, I was 100% misunderstanding the path data that I was reading. I didn't realize that the delimiting information was based on the letter. My brain wanted some specific character as a delimiter like a comma or pipe.
So reading (and in some cases re-reading :| ) the documentation, when I see:
M753,315H435.27V165H753Z
I can read that as:
M753,315 Move to x,y coordinates x: 753 y:315
H435.27 Starting at the current location, draw a horizontal line to the absolute x coordinate of 435.27
V165 Starting at the current location, draw a vertical line to the absolute y coordinate of 165
H753 Starting at the current location, draw a horizontal line to the absolute x coordinate of 753
ZDraw a straight line to the initial point of this path to close the path. This doesn't necessarily mean a horizontal or vertical line, but the coincidence that we're at the same x coordinate that we started at means that if we draw a straight line we will get a vertical line to complete the rectangle
That seems right. Anything I missed or misunderstood?
Also, thank for all of the links. I appreciate the points :clap: :bows:
I have a shape that, when created using slide.shapes.add_shape, automatically has a line. Is it possible to remove the line?
I have made the shape 50% transparent and the background behind it is an image which means it's not possible to set the line's colour to blend in.
I was hoping shape.line = False would work, but sadly not..
Set the line fill to no-fill:
shape.line.fill.background()
This is more reliable, as you mention, than setting the line color so it just doesn't show (most of the time). It has the side benefit that the apparent extents of the shape run to the actual edge of the shape, which can prevent subtle alignment issues.
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.
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.
I have a view that draws multicolored text inside UITableViewCell. To draw multicolored text I'm using NSAttributedString However, I would like to make it so that if the text is too long to fit into the view, the last visible line is truncated to display an ellipsis at its end.
Obviously this is very easy to do when drawing only a single line, as you can just set
kCTLineBreakByTruncatingTail for the line break mode of the paragraph style. The problem is that I want my text to wrap to fill the rectangle, and then only have the last line truncated with an ellipsis - setting the line break mode confines the whole text to one line.
Does anybody have any ideas of how I would go about this?
Many thanks in advance for any suggestions,
JC.
Create your CTFrame from your CTFrameSetter with the rectangle of your UITableViewCell. Then, you can get all the CTLines of your CTFrame and determine when they will cut off. To swap out the ellipsis, you could keep that drawn with a separate CTFrame and draw it over the overflowing text on the last line.
You can find working code here: https://stackoverflow.com/a/14612598/473067
It's a similar approach to what Heath suggested. But then all wrapped up in a shiny package.
Well, to activate text truncating in UILabel, you should re-set lineBreakMode parameter to NSLineBreakByTruncatingTail after setting attributedText.
textLabel.attributedText = attributedText;
textLabel.lineBreakMode = NSLineBreakByTruncatingTail;