D3 Tips and Tricks: Interactive Data Visualization/

...

/

Attributes: Width, Height, Length, and Text

Attributes: Width, Height, Length, and Text

Learn the basics of the width, height, length, and text attributes.

We'll cover the following...

width, height

width and height are required attributes of the rectangle element. width designates the width of the rectangle and height designates the height. (If you’re wondering, I often struggle defining the obvious.)

The following is an example of the code section required to draw a rectangle (using only the required attributes):

Press + to interact
holder.append("rect")       // attach a rectangle
    .attr("x", 100)         // position the left of the rectangle
    .attr("y", 50)          // position the top of the rectangle
    .attr("height", 100)    // set the height
    .attr("width", 200);    // set the width

This will produce a rectangle as follows:

The width of the triangle is 200 pixels, and the height is 100 pixels.

text-anchor

The text-anchor attribute determines the justification of a text element

Text can have one of three text-anchor types:

  • start where the text is left justified.
  • middle where the text is centre justified.
  • end where the text is right
...