2. Creating Images from Simple Text | Learning D3.js Mapping

Line

The SVG line is one of the simplest in the library. It draws a straight line from one point to another. The syntax is very straightforward and can be experimented with at http://localhost:8080/chapter-2/line.html, assuming the http-server is running:

<line x1="10" y1="10" x2="100" y2="100" stroke-width="1" stroke="red"/>

This will give you the following output:

A description of the element's attributes is as follows:

x1 and y1: The starting x and y coordinates
x2 and y2: The ending x and y coordinates
stroke: This gives the line a red color
stroke-width: This denotes in pixels the width of the line to be drawn

The line tag also has the ability to change the style of the end of the line. For example, adding the following would change the image so it has round endings:

stroke-linecap: round;

As stated earlier, all SVG tags can also be styled with CSS elements. An alternative way of producing the same graphic would be to first create a CSS style, as shown in the following code:

      line ...

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Learning D3.js Mapping

By : Newton, Oscar Villarreal

Learning D3.js Mapping

By: Newton, Oscar Villarreal

Overview of this book

Line

Learning D3.js Mapping

By : Newton, Oscar Villarreal

Learning D3.js Mapping

By: Newton, Oscar Villarreal

Overview of this book

Line

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access