xxxxxxxxxx<html> <head> <style> body { font-family: sans-serif; } path { fill: #0099cc; } input[name=symbol] { margin-right: 10px; } label { display: block; padding: 5px 10px; } span.alias { color: #444; } </style> </head> <body> <svg></svg> <div id="extra-symbols"> <label><input type="radio" name="symbol" value="symbolTriangleDown">d3.symbolTriangleDown</label> <label><input type="radio" name="symbol" value="symbolTriangleLeft">d3.symbolTriangleLeft</label> <label><input type="radio" name="symbol" value="symbolTriangleRight">d3.symbolTriangleRight</label> <label><input type="radio" name="symbol" value="symbolDiamondAlt">d3.symbolDiamondAlt</label> <label><input type="radio" name="symbol" value="symbolDiamondSquare">d3.symbolDiamondSquare</label> <label><input type="radio" name="symbol" value="symbolPentagon" checked>d3.symbolPentagon</label> <label><input type="radio" name="symbol" value="symbolHexagon">d3.symbolHexagon</label> <label><input type="radio" name="symbol" value="symbolHexagonAlt">d3.symbolHexagonAlt</label> <label><input type="radio" name="symbol" value="symbolOctagon">d3.symbolOctagon</label> <label><input type="radio" name="symbol" value="symbolOctagonAlt">d3.symbolOctagonAlt</label> <label><input type="radio" name="symbol" value="symbolX">d3.symbolX <span class="alias">(<i>alias: d3.symbolCrossAlt</i>)</span></label> </div> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="d3-symbol-extra.min.js"></script> <script> var symbol = d3.symbol().size(1000).type(d3.symbolPentagon); var path = d3.select('svg') .attr('width', 100) .attr('height', 100) .append('path') .attr('transform', 'translate(50, 50)') .attr('d', function() { return symbol(); }); d3.selectAll('#extra-symbols input[name=symbol]').on('change', function() { symbol.type(d3[this.value]); path.attr('d', function() { return symbol(); } ); }); </script> </body></html> https://d3js.org/d3.v4.min.js