d3.js - 将限制线添加到 D3.js 折线图

Question

有没有办法按照下图向 D3.js 折线图添加限制线？（不必用虚线） 我的数据库中有上限和下限列。一直在网上搜索不成功的例子来说明如何实现这一点？

Answer 1

不确定“限制线”到底是什么，但这在视觉上不是问题。作为一个起点，我建议这样做：

// (assuming some vars have been created per usual templates)

svg.append( "line" )
  .attr("x1", x( x.domain()[0] ) )
  .attr("x2", x( x.domain()[1] ) )
  .attr("y1", y( 80 ) )   // whatever the y-val should be
  .attr("y2", y( 80 ) )

然后添加 css 或 attrs 来定义您的线路的特定外观。

请评论它不适合您的任何方式。

Answer 2

我确实通过引入另一组具有恒定 y 值的线来解决问题，从而产生了这个图表： 它基本上是一个多折线图，带有额外的两条线，如下所示。