Question

我在这里有一个矮人-https://plnkr.co/edit/qDi8bm3xh3hdaV059AXX?p=preview

它是一个条形图，其中使用开始和结束位置绘制条形。

开始位置可能高于结束位置，所以我有逻辑仍然将条形图绘制在正确的位置。

我想在条形图上画一个箭头，以指示开始位置是高于还是低于结束位置。

我已经在条形图上添加了data-arrow（我已经使用过一个类），它指示箭头是应该向上还是向下。

.attr('data-arrow', (d, i) => {
    return d.start > d.finish ? 'down' : 'up'
})

是否可以在条形图上绘制一些元素以指示开始位置。

可以在每个条上绘制一个箭头，然后使用data属性和css以正确的方式旋转它

Answer 1

只需在另一方向画线

  bar.enter()
    .append("line")
      .attr("x1", d => x(d.phase) + x.bandwidth()/2)
      .attr("y1", d => y(d.start) + ((d.start < d.finish) ? -10 : 10) )
      .attr("x2", d => x(d.phase) + x.bandwidth()/2)
      .attr("y2", d => y(d.finish) + ((d.start < d.finish) ? 15 : -15) )
      .attr('class', d => d.start > d.finish ? 'arrow-down' : 'arrow-up' )
      .attr("stroke","red")
      .attr("stroke-width",2)
      .attr("marker-end","url(#arrow)");

Answer 2

这是一个快速解决方案：再次输入bars，然后在箭头的start点上附加箭头（或其他形状）：

bar.enter()
    .append("circle")
    .attr("cy", d => y(d.start))
    .attr("cx", d => x(d.phase) + x.bandwidth()/2)
    .attr("r", 5)
    .attr("fill", "blue")

Updated plankr

在此解决方案中，尽管也没有害处，但不需要其他数据属性。如果重要的是要显示方向，除了起点外，我还会考虑gradients，因为它们通常会增加图形的混乱度。

请注意，由于y轴，方向是隐式已知的。除非我们有关于从最小到最大的变化率的数据，否则添加箭头并不会真正提供新信息。

D3-在栏上绘制箭头以反映数据

2 个答案: