2

I'm using Segment Plot to show multiple lines on the chart. How can I make these lines have arrows on their ends?

Anil
  • 1,079
  • 1
  • 13
  • 23

2 Answers2

2

You can do this with some SVG + DOM hacking. You can define a "marker element" that can be placed at the beginning, middle or end of a line (see http://tutorials.jenkov.com/svg/marker-element.html for details on markers).

This means manipulating the SVG generated by Plottable. To get the underlying DOM elements, you need to get hold of the d3 "selection" representing each line.

  1. Add a marker definition to the <svg> element where you are rendering the plot. I am pretty sure plottable won't overwrite entities already inside, but if it does you can always add it after rendering the plot.
  2. Use Segment#entities to get all "PlotEntity" objects from the plot (http://plottablejs.org/docs/classes/plottable.plots.segment.html#entities).
  3. Use the PlotEntity#selection property (http://plottablejs.org/docs/interfaces/plottable.plots.plotentity.html#selection) to get the set of DOM elements representing each segment.
  4. The "Selection" interface is just a d3 selection (https://github.com/mbostock/d3/wiki/Selections). You can then add the appropriate "marker-end" attribute to each element, which should give you the arrow heads you want.
Justin Bailey
  • 1,487
  • 11
  • 15
  • 1
    Thanks a lot, this helped - I have the arrows now! There is only one little issue with colors though - lines are in different colors, depending on the data (dynamic number of colors), but marker has fixed color. Can I somehow make the marker inherit the color from the line it is applied to? Otherwise I would need to dynamically create multiple markers (one for each color). – Anil Mar 30 '16 at 05:45
  • [Seems not to be possible at the moment](http://stackoverflow.com/a/16665510/369822) – Anil Mar 30 '16 at 06:00
  • 1
    I've managed to make it work by defining multiple markers on the fly, one for each color appearing in the chart. – Anil Mar 31 '16 at 20:00
0

On the off-chance these lines are vertical, I have a super easy hack. Use .symbol() to create a scatter plot where the points are either up or down arrows, and place them at the ends of the segments.

Otherwise, you may have to draw the arrows yourself. You can get the pixel locations of the ends of the segments like this:

locX = xScale.invert(endpointXValue)

locY = yScale.invert(endpointYValue)

And then you could append an arrow shape to the foreground (see the crosshair container in this example)

Cassie
  • 36
  • 2