plottable

Arrows on Line Segments

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

Solution

  • 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.