Estoy tratando de crear flechas direccionales en una ruta svg que se está procesando usando d3 . Obtengo los puntos de inicio usando la cadena de ruta y el paquete npm svg-path-properties . Luego empujo estos puntos a una matriz y, en otra función, mapeo estos puntos en la ruta svg original con la lógica d3 para crear triángulos en cada punto.

 public mapArrowPoints(): void { this.arrowPoints.forEach((point: ArrowPointObject) => { const path = d3.path(); path.moveTo(parseInt(point.x, 10), parseInt(point.y, 10)); path.lineTo(parseInt(point.x, 10) + 8, parseInt(point.y, 10) + 2); path.lineTo(parseInt(point.x, 10) + 0, parseInt(point.y, 10) + 8); path.closePath(); const svg = d3.select('svg#topLevel'); const defs = svg.insert('defs', '#curve'); const marker = defs.append('marker'); marker .attr('id', 'triangle') .attr('viewBox', '0 -5 10 10') .attr('markerWidth', 4) .attr('markerHeight', 4) .attr('orient', 'auto') .append('path') .attr('d', path.toString()) .attr('fill', 'red') .attr('stroke', 'black') .attr('stroke-width', '3px'); svg .select('#curve') .attr('marker-start', 'url(#triangle)') .attr('marker-mid', 'url(#triangle)') .attr('marker-end', 'url(#triangle)'); }); }

Ahora, cuando reviso el navegador, puedo ver mi ruta principal, pero no triángulos. Puedo inspeccionar el DOM y ver el svg , el defs , el marker y la path en la que se supone que deben agregarse. También puedo seleccionar la ruta del marcador y ver dónde debería mostrarse (un cuadro azul muestra dónde debería estar el triángulo). No puedo entender por qué no se muestran los triángulos. Cualquier ayuda será muy apreciada. Creé un ejemplo de stackblitz para experimentar con soluciones.