javascript - 在图表中显示低于或高于阈值的区域在 D3 中不起作用

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 3 年前。

Improve this question

我有一个用 React 实现的 D3 图表。我显示低于或高于阈值的区域，即蓝色虚线。但它没有按预期工作。

代码沙箱 here .

数据:

var data = [
      {
        startTime: "1570184520049",
        magnitude: -20
      },
      {
        startTime: "1570875720049",
        magnitude: 0
      },
      {
        startTime: "1571653320049",
        magnitude: 10
      },
      {
        startTime: "1572517320049",
        magnitude: 0
      },
      {
        startTime: "1573467720049",
        magnitude: 0
      },
      {
        startTime: "1574504520049",
        magnitude: 10
      },
      {
        startTime: "1575627720049",
        magnitude: 0
      }
    ];

我的区域代码:

var area = d3
  .area()
  .x0(function(d) {
    return xScale(d.startTime);
  })
  .x1(function(d) {
    return xScale(d.magnitude);
  })
  .y0(function(d) {
    return yScale(d.magnitude);
  })
  .y1(height);

这对于上述数据来说效果很好。
但是，如果我对数据的最后一个元素有一些值(大小)，它就不起作用。对于较少的数据元素，它不起作用。

  {
    startTime: "1575627720049",
    magnitude: 10
   }

有人可以告诉我问题是什么或者我哪里做错了吗。

Answer 1

您应该更新函数的 y1 定义，例如 .y1(yScale(0)) 在这种情况下，所有内容都将与您的绝对 0 相关图表上的 code> ，第一个点和最后一个点的原点为比例 0

区域完整更新:

 var area = d3
      .area()
      .x(function(d) {
        return xScale(d.startTime);
      })
      .y0(function(d) {
        return yScale(d.magnitude);
      })
      .y1(yScale(0));