D3.js D3-在条形图上绘制箭头以反映数据

我这里有一个失物招领-

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

开始位置可能高于结束位置，因此我仍然有逻辑在正确位置绘制条形图

我想在横杆上画一个箭头，指示开始位置是高于还是低于结束位置

我在条中添加了一个

数据箭头

（我已经使用了一个类），它指示箭头是向上还是向下

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

可以在杆上画一些元素来指示起始位置吗

---

可以在每个条上绘制一个箭头，然后使用数据属性和css以正确的方式旋转它。这里有一个简单的解决方案：再次输入

条

，并将箭头（或其他形状）附加到条的

起始点

：

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")

在这个解决方案中，不需要额外的数据属性，尽管这也不会造成损害。如果重要的是显示方向，除了开始点，我也会考虑，因为它们通常会给图形添加更少的杂波。

---

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

只需在另一个方向画一条线

  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)");

bar.enter（）
.附加（“行”）
.attr（“x1”，d=>x（d.phase）+x.bandwidth（）/2）
.attr（“y1”，d=>y（d.start）+（d.startx（d.phase）+x.bandwidth（）/2）
.attr（“y2”，d=>y（d.finish）+（d.startd.start>d.finish？'arrow down'：'arrow up'）
.attr（“笔划”、“红色”）
.attr（“笔划宽度”，2）
.attr（“标记结束”、“url（#箭头）”）；

考虑将xScale设置为

rangeRound（）

，对于这些小箭头，您需要两个定义才能使其看起来更好，因此使用CSS添加旋转不是理想的解决方案将xScale设置为

rangeRound（）

有何帮助here@ttmt我的答案不管用吗？它会产生一个更清晰的图表，为什么在Y上使用rangeRound而不是在X上，解决方案是comment@rioV8，这里有两个问题。我相信我的答案是针对第一个问题的。对于第二个问题，你的评论是正确的。但我建议不要在这种情况下添加箭头，因为它们只会给这个图添加混乱，而不会传递有用的信息。轴在传递方向信息方面做得更好。