Tengo un stackblitz aquí -https: //stackblitz.com/edit/chart-update-1-34uvdo? file = src / app / bar-chart.ts

Es un gráfico d3 en una aplicación angular.

Las barras tienen flechas para mostrar la posición de inicio y finalización de la barra.

Me gustaría tener cada compuesto de flecha de barra en un elemento g, en este momento todos están en el mismo elemento g.

¿Cómo puedo crear un elemento g para cada barra y flecha?

bar.enter()
    .append("line")
    .attr("x1", d => this.x(d.phase) + this.x.bandwidth() / 2)
    .attr("y1", d => this.y(d.start) + ((d.start < d.finish) ? -5 : 5))
    .attr("x2", d => this.x(d.phase) + this.x.bandwidth() / 2)
    .attr("y2", d => this.y(d.finish) + ((d.start < d.finish) ? 5 : -5))
    .attr("stroke", "black")
    .attr("stroke-width", 3)
    .attr("marker-end", "url(#arrow)")
    .style('pointer-events', 'none');