Elements: Line, Polyline, Polygon, and Path
Learn the basics of the line, polyline, polygon, and path elements in D3.
Line
A line is a simple line between two points and is described by four required attributes.
x1: The x position of the first end of the line as measured from the left of the screeny1: The y position of the first end of the line as measured from the top of the screenx2: The x position of the second end of the line as measured from the left of the screeny2: The y position of the second end of the line as measured from the top of the screen
The following is an example of the code section required to draw a line. A notable addition to this code is the style declaration. In this case, the line does not have color, and this can be added with the stroke style, which applies color to a line:
Press + to interact
holder.append("line") // attach a line.style("stroke", "black") // colour the line.attr("x1", 100) // x position of the first end of the line.attr("y1", 50) // y position of the first end of the line.attr("x2", 300) // x position of the second end of the line.attr("y2", 150); // y position of the second end of the line
This will produce a line as follows: ...
Access this course and 1400+ top-rated courses and projects.