x/y

The x and y attributes are used to designate a position on the web page. Use the x and y attributes places the anchor points for these elements at a specified location.

x1, y1, x2, y2

The x1, y1, x2, y2 attributes are used to designate the position of two points on the web page. These two points are connected with a line as part of the line element.

points

The points attribute is used to set a series of points which are subsequently connected with a line and/or which may form the bounds of a shape. These are specifically associated with the polyline and polygon elements.

The data for the points is entered as a sequence of x,y points in the following format:

1
.attr('points', '100,50, 150,150, 150,50')

cx, cy

The cx, cy attributes are associated with the circle and ellipse elements and designate the center of each shape.

  • cx: The position of the center of the element in the x axis.

  • cy: The position of the center of the element in the y axis.

rx, ry

The rx, ry attributes are associated with the ellipse element and designate the radius in the x and y directions.

  • rx: The radius of the ellipse in the x direction.

  • ry: The radius of the ellipse in the y direction.

transform(translate(x, y), scale(k), rotate(a))

  • translate(x, y): move the element by a relative value in x and y directions.

  • scale(k): Increase or reduce the element by a specified factor.

  • rotate(a): Rotate the element by an angular value.

All transform are applied based on the origin of (0, 0).

rotate(10)

So you’d better use transform like this:

1
2
3
4
5
6
holder.append('text')
    .style('fill', 'black')
    .attr('dy', '0.35em')
    .attr('text-anchor', 'middle')
    .attr('transform', 'translate(200, 100) rotate(10) scale(2)')
    .text('Hello World')

width, height

width and height are required attributes of the rectagule element, width designates the width of the rectangle and height designates the height.

text-anchor

The text-anchor attribute determines the justification of a text element. You can set it to start, middle, or end.

dx, dy

dx and dy are optional attributes that designate an offset of text elements from the anchor point in the x and y directions.

textLength

The textLength attribute adjusts the length of the text element to fix a specified value.

lenghtAdjust

The lengthAdjust attribute allows the textLength attribute to have the spacing of a text element controlled to be either spacing or spacingAndGlyphs.

  • spacing: In thi soption the letters remain the same size, but the spacing between the letters and words are adjusted.

  • spacingAndGlyphs: In this option the text is stretched or squeezed to fit.