Стрелки на отрезках линии

Question

Я использую график сегмента, чтобы показать несколько линий на графике. Как сделать так, чтобы у этих линий были стрелки на концах?

Answer 1

Вы можете сделать это с помощью взлома SVG + DOM. Вы можете определить "элемент маркера", который можно поместить в начало, середину или конец строки (подробности о маркерах см. На http://tutorials.jenkov.com/svg/marker-element.html).

Это означает манипулирование SVG, сгенерированным Plottable. Чтобы получить базовые элементы DOM, вам нужно получить d3 "selection", представляющий каждую строку.

1. Добавьте определение маркера в <svg> элемент, где вы рендеринг сюжета. Я почти уверен, что plottable не будет перезаписывать объекты, уже находящиеся внутри, но если это так, вы всегда можете добавить его после рендеринга графика.
2. Используйте объекты Segment#, чтобы получить все объекты "PlotEntity" из графика ( http://plottablejs.org/docs/classes/plottable.plots.segment.html).
3. Используйте свойство выбора PlotEntity# ( http://plottablejs.org/docs/interfaces/plottable.plots.plotentity.html), чтобы получить набор элементов DOM, представляющих каждый сегмент.
4. Интерфейс "Выбор" - это просто выбор d3 ( https://github.com/mbostock/d3/wiki/Selections). Затем вы можете добавить соответствующий атрибут "marker-end" для каждого элемента, который должен дать вам нужные стрелки.

Answer 2

По случайности эти линии вертикальные, у меня супер легкий взлом. Используйте .symbol() для создания точечной диаграммы, где точки представляют собой стрелки вверх или вниз, и разместите их на концах сегментов.

В противном случае вам, возможно, придется нарисовать стрелки самостоятельно. Вы можете получить пиксельные положения концов сегментов следующим образом:

locX = xScale.invert(endpointXValue)

locY = yScale.invert(endpointYValue)

И тогда вы можете добавить форму стрелки на передний план (см. Контейнер с перекрестием в этом примере)