score:1

Accepted answer

Just draw the line in the other direction

  bar.enter()
    .append("line")
      .attr("x1", d => x(d.phase) + x.bandwidth()/2)
      .attr("y1", d => y(d.start) + ((d.start < d.finish) ? -10 : 10) )
      .attr("x2", d => x(d.phase) + x.bandwidth()/2)
      .attr("y2", d => y(d.finish) + ((d.start < d.finish) ? 15 : -15) )
      .attr('class', d => d.start > d.finish ? 'arrow-down' : 'arrow-up' )
      .attr("stroke","red")
      .attr("stroke-width",2)
      .attr("marker-end","url(#arrow)");

score:0

Here's a quik solution: enter bars again and append arrows (or other shapes) to the start point of the bars:

bar.enter()
    .append("circle")
    .attr("cy", d => y(d.start))
    .attr("cx", d => x(d.phase) + x.bandwidth()/2)
    .attr("r", 5)
    .attr("fill", "blue")

Updated plankr

In this solution, there is no need for additional data attributes although it doesn't harm either. If it is important to show direction, in addition to the start point, I would also consider gradients because they generally add less clutter to the graph.

Note that the direction is implicitly known because of the y-axis. Adding an arrow does not really give new information unless we have data regarding the rate of change from min to max.


Related Query

More Query from same tag