Once upon a time there were
<rect>s were good.
All of these
rects are very very very boring, though. So boring, in fact, that you can’t even see them.
rects above exist, but in the kind of way that your Aunt Mary’s baby exists in the months before it’s born. It’s kind of there, but you can’t see it and it sure as hell can’t do anything.
Babies need to be born and grow hair and get jobs and wear button-up shirts and stuff, and so does a
rect can do that by getting an
x and a
width and a
These are all called attributes. Clothes make the manatee, and attributes make the shape! The
y attributes position the
rect inside of the
svg, and the
height give it a size.
Attributes are anything that gets an equals sign in the HTML.
class can be an attribute,
id can be an attribute.
width are also attributes for
svg, in case you didn’t notice!
Every kind of svg element has its own set of attributes. Sometimes they overlap, sometimes they don’t.
cyfor position, and
yfor the top left, and
heightfor its size
yto position it and
text-anchorto figure out how it gets aligned (centered, left-aligned, etc)
Those are just a few common ones, follow the links above to learn about other attributes. You can also check out a ton of other SVG elements.
By adding attributes to a
rect or any other SVG element, you bring it to life. Two big things that attributes are for are
Attributes in d3 are edited using
.attr(). Let’s say we had the following svg:
It would look a lot like this:
Which is to say, like nothing, but it has no
y! Don’t worry, though we can salvage the situation with d3.
After you select your elements, using
.attr allows you to set an attribute to a specific value.
That code will set all of the rectangles to have a
height of 20 and a
y of 30.
cyall position the elements inside of their parent SVG. The
yis how far from the top, the
xis how far from the left.
For the full example of not setting all of the attributes and then setting them later with d3, see below.
But those are ugly, right? How about we spice them up?
There’s another attribute we haven’t talked about, and it’s called
style. It’s a way of writing CSS, all crammed into one line. For example:
You can even add multiple CSS rules inside of the
style attribute! You might even need to scroll to the right inside of the box below.
The thing is, you’ll never do that. It’s pure garbage. It’s practically illegal. Never do that. If you want to write your own CSS, do it the Real Way, up in a
But yeah, come on, we’re here to write d3! And because styling is very very very connected to the data you’re displaying (high danger? red!), we’re going to use d3 to edit the style tag. But there’s a catch.
style is an attribute, you don’t edit
attr! Because so many different things can be hiding inside of
style - maybe the stroke width, or the fill, or the opacity, etc - it gets its very own method,
When you use
style, the first parameter is the attribute you want to edit, and the second parameter is the value you’d like it to be. Sometimes the second parameter is a function!
Chances are you’ll be spending a lot of time changing the fill color using a function instead. That sets it piece by piece, looking at the associated piece of data.
And there you have it!
Sometimes you have attributes that can also be styles. For example,
text-anchor is used to align svg text, and you can use either
.style() with it!
Generally, though - position and size are
.attr, and all other decoration is
.style. But hey, that’s probably a lie, too.