D3: svg, path, d3.selectAll, .style: Sketch and Fill Triangle

nick3499
1 min readFeb 25, 2017

--

path_triangle.html

<svg width="720" height="120"> sets canvas size. <path d="M 10 10 L 310 10 L 160 110 Z"/> in path mini-language, means: M 10 10 moves starting point to (x=10, y=10). L 310 10 draws line from (10,10) to (310,10). L 160 10 draws line from (310,10) to (160,110). Z closes path to complete triangular shape. Finally, d3.selectAll('path').style('fill', 'darkkhaki'); fills the triangle with the HTML color darkkhaki.

--

--

nick3499
nick3499

Written by nick3499

coder of JavaScript and Python

No responses yet