plottable - 线段上的箭头

Question

我正在使用Segment Plot在图表上显示多条线。我怎样才能让这些线的末端有箭头？

Answer 1

你可以通过一些 SVG + DOM hacking 来做到这一点。您可以定义一个“标记元素”，它可以放置在一行的开头、中间或结尾（有关标记的详细信息，请参见http://tutorials.jenkov.com/svg/marker-element.html）。

这意味着操纵 Plottable 生成的 SVG。要获取底层 DOM 元素，您需要掌握代表每一行的 d3“选择”。

1. <svg>向要渲染绘图的元素添加标记定义。我很确定 plottable 不会覆盖内部已经存在的实体，但如果是这样，您始终可以在渲染绘图后添加它。
2. 使用 Segment#entities 从图中获取所有“PlotEntity”对象（http://plottablejs.org/docs/classes/plottable.plots.segment.html#entities）。
3. 使用 PlotEntity#selection 属性 ( http://plottablejs.org/docs/interfaces/plottable.plots.plotentity.html#selection ) 获取代表每个段的 DOM 元素集。
4. “选择”界面只是一个 d3 选择（https://github.com/mbostock/d3/wiki/Selections）。然后，您可以为每个元素添加适当的“marker-end”属性，这应该会为您提供所需的箭头。

Answer 2

如果这些线是垂直的，我有一个超级简单的技巧。使用.symbol()创建散点图，其中点为向上或向下箭头，并将它们放置在段的末端。

否则，您可能必须自己绘制箭头。您可以像这样获取段末端的像素位置：

locX = xScale.invert(endpointXValue)

locY = yScale.invert(endpointYValue)

然后您可以将箭头形状附加到前景（请参阅本例中的十字准线容器）