线段上的箭头

Question

我使用Segment Plot在图表上显示多行。如何让这些线条末端有箭头？

Answer 1

你可以通过一些SVG + DOM黑客来做到这一点。您可以定义一个＆＃34;标记元素＆＃34;可以放在一行的开头，中间或末尾（有关标记的详细信息，请参阅http://tutorials.jenkov.com/svg/marker-element.html）。

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

1. 将标记定义添加到要渲染绘图的<svg>元素。我很确定plottable不会覆盖已经在里面的实体，但如果确实如此，你可以在渲染绘图后添加它。
2. 使用Segment＃实体获取所有＆＃34; PlotEntity＆＃34;情节中的对象（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. ＆＃34;选择＆＃34; interface只是一个d3选择（https://github.com/mbostock/d3/wiki/Selections）。然后，您可以添加适当的＆＃34;标记结束＆＃34;属性到每个元素，它应该为你提供你想要的箭头。

Answer 2

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

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

locX = xScale.invert(endpointXValue)

locY = yScale.invert(endpointYValue)

然后你可以在前台附加箭头形状（参见本例中的crosshair container）