Eu tenho um stackblitz aqui -https: //stackblitz.com/edit/chart-update-1-34uvdo? file = src / app / bar-chart.ts

É um gráfico d3 em um aplicativo angula

As barras têm setas para mostrar a posição inicial e final da barr

Gostaria que cada seta de barra fosse composta em um elemento g - no momento elas estão todas no mesmo elemento

Como posso criar um elemento g para cada barra e flech

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');