线段上的箭头
Arrows on Line Segments
我正在使用 Segment Plot 在图表上显示多条线。我怎样才能让这些线的末端有箭头？
如果这些线是垂直的，我有一个超级简单的 hack。使用 .symbol() 创建一个散点图，其中点是向上或向下箭头，并将它们放在线段的末端。
否则，您可能需要自己绘制箭头。您可以像这样获取线段末端的像素位置：
locX = xScale.invert(endpointXValue)
locY = yScale.invert(endpointYValue)
然后你可以在前景中附加一个箭头形状（参见本例中的 crosshair container）
您可以通过一些 SVG + DOM hacking 来做到这一点。您可以定义一个 "marker element"，它可以放在一行的开头、中间或结尾（有关标记的详细信息，请参阅 http://tutorials.jenkov.com/svg/marker-element.html）。
这意味着操作 Plottable 生成的 SVG。要获取底层 DOM 元素，您需要获取代表每一行的 d3 "selection"。
- 向渲染图的
<svg> 元素添加标记定义。我很确定 plottable 不会覆盖已经在里面的实体，但如果它覆盖了，你总是可以在渲染图后添加它。
- 使用 Segment#entities 从图中获取所有 "PlotEntity" 个对象 (http://plottablejs.org/docs/classes/plottable.plots.segment.html#entities)。
- 使用 PlotEntity#selection 属性 (http://plottablejs.org/docs/interfaces/plottable.plots.plotentity.html#selection) 获取代表每个段的 DOM 元素集。
- "Selection"接口只是一个d3选择（https://github.com/mbostock/d3/wiki/Selections）。然后，您可以向每个元素添加适当的 "marker-end" 属性，这应该会为您提供所需的箭头。
我正在使用 Segment Plot 在图表上显示多条线。我怎样才能让这些线的末端有箭头？
如果这些线是垂直的，我有一个超级简单的 hack。使用 .symbol() 创建一个散点图，其中点是向上或向下箭头，并将它们放在线段的末端。
否则，您可能需要自己绘制箭头。您可以像这样获取线段末端的像素位置：
locX = xScale.invert(endpointXValue)
locY = yScale.invert(endpointYValue)
然后你可以在前景中附加一个箭头形状（参见本例中的 crosshair container）
您可以通过一些 SVG + DOM hacking 来做到这一点。您可以定义一个 "marker element"，它可以放在一行的开头、中间或结尾（有关标记的详细信息，请参阅 http://tutorials.jenkov.com/svg/marker-element.html）。
这意味着操作 Plottable 生成的 SVG。要获取底层 DOM 元素，您需要获取代表每一行的 d3 "selection"。
- 向渲染图的
<svg>元素添加标记定义。我很确定 plottable 不会覆盖已经在里面的实体，但如果它覆盖了，你总是可以在渲染图后添加它。 - 使用 Segment#entities 从图中获取所有 "PlotEntity" 个对象 (http://plottablejs.org/docs/classes/plottable.plots.segment.html#entities)。
- 使用 PlotEntity#selection 属性 (http://plottablejs.org/docs/interfaces/plottable.plots.plotentity.html#selection) 获取代表每个段的 DOM 元素集。
- "Selection"接口只是一个d3选择（https://github.com/mbostock/d3/wiki/Selections）。然后，您可以向每个元素添加适当的 "marker-end" 属性，这应该会为您提供所需的箭头。