Symbols and Custom Path Shapes

d3.symbol(type, size) draws a marker at the origin whose area is size square pixels. d3.symbolsFill has seven filled types and, since d3-shape 3.2, d3.symbolsStroke seven outline types. d3.path() records Drawing Paths and Shapes's Canvas path calls (moveTo, arc, closePath and so on) and serializes them as path data:

d3.symbolsFill, d3.symbolsStroke and a d3.path bookmarkHTMLLive
<script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script>
<svg width="620" height="84" font-family="Consolas, monospace" font-size="12"></svg>
<script>
  const svg = d3.select('svg'), types = [...d3.symbolsFill, ...d3.symbolsStroke];
  svg.selectAll('path').data(types).join('path').attr('d', t => d3.symbol(t, 180)())
    .attr('transform', (t, i) => `translate(${16 + i * 30}, 20)`).attr('stroke-width', 1.5)
    .attr('fill', (t, i) => i < 7 ? '#5b3f99' : 'none')
    .attr('stroke', (t, i) => i < 7 ? 'none' : '#b5452f');
  const p = d3.path();                                          // a bookmark ribbon
  p.moveTo(0, 0); p.lineTo(24, 0); p.lineTo(24, 40); p.lineTo(12, 30); p.lineTo(0, 40);
  p.closePath();
  svg.append('path').attr('d', p).attr('fill', '#e09a10')
    .attr('transform', 'translate(450, 2)');
  svg.append('text').attr('x', 0).attr('y', 72).text(`d3.path(): ${p}`);
</script>
Browser output of Listing 6.18
Browser output of 18

A d3.path becomes its string wherever text is expected, so attr('d', p) works. Generators round to three decimals; line.digits(1) or d3.pathRound(1) shortens big charts' markup.