From the course: D3.js Essential Training for Data Scientists
Join today to access over 22,500 courses taught by industry experts or purchase this course individually.
Drawing lines - D3.js Tutorial
From the course: D3.js Essential Training for Data Scientists
Drawing lines
- You might think a line needs no introduction, but an SVG line has a specific definition. A line in SVG is a straight line only, starting at one point, and ending at another. It is not curved or wiggly, and it does not have different sections going at different angles. That is a polyline in SVG terms. A line can go at any angle, though, it doesn't need to be horizontal or vertical. The line shape has four mandatory attributes: X1 and Y1, X2 and Y2. The first pair set the start position, and the second pair set the end position. We're going to add three horizontal lines, with the data determining their width. You could have the data determine the thickness, or the angle, or the strength of color, if you prefer. So let's copy and paste the previous code, replacing ellipse with line. And I copy that, and paste it, and then change the indentation. Change newX to 900, ellipse to line. And we can remove this class here, because there aren't any other lines on the page, so the browser's not…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.