在 d3.js 中隐藏折线图的负数部分答案

【问题标题】：Hide negative part of line chart in d3.js在 d3.js 中隐藏折线图的负数部分
【发布时间】：2020-03-26 12:22:09
【问题描述】：

我有一个可能有负值的 d3.js 折线图。我的 Y 跨度从 0 开始，一直上升到数据集中的最大值。因此，当有负值时，线会在 X 轴下方。

这很好，但我只需要隐藏 X 轴下方的线部分。我想保持原样，只需使用一些 CSS 或 JS 使 X 轴下方的线部分不可见。

我尝试了各种溢出设置，但似乎没有帮助。可以通过在 X 轴以下的部分上放置一个元素来使 X 轴以下的所有内容不可见，但是 X 轴标签也会被隐藏。

这是画线的代码：

x.domain([d3.min(data, function(d) { return d.date}), d3.max(data, function(d) { return d.date})]);
y.domain([0, 1.05 * d3.max(data, function (d) { return d.value; })]);
area.y0(y(0));

g.append("path")
    .datum(data)
    .attr("fill", "#f6f6f6")
    .attr("d", area);

//create line
var valueline = d3.line()
    .x(function (d) { return x(d.date); })
    .y(function (d) { return y(d.value); });

g.append("path")
    .data([data])
    .attr('fill', 'none')
    .attr('stroke', '#068d46')
    .attr("class", "line")
    .attr("d", valueline);

小提琴：https://jsfiddle.net/c1bvrd50/1/

【问题讨论】：

标签： javascript css d3.js

【解决方案1】：

解决此问题的一种方法是在覆盖正值区域的矩形内剪裁线。在 SVG 中，这是通过 clip-path 完成的。

这发生在两个步骤中：

在clipPath 内定义rect，仅覆盖图表区域：

g.append('clipPath')
  .attr('id', 'clipRect')
  .append('rect')
    .attr('x', 0)
    .attr('y', 0)
    .attr('width', width)
    .attr('height', height)

剪切线条路径，使用clip-path属性：

g.append("path")
  .data([data])
  /* ... */
  .attr("d", valueline)
  .attr('clip-path', 'url("#clipRect")')

更新了实现解决方案的 jsFiddle：here。

剩下要做的是更新工具提示的mousemove 事件侦听器，以便在值小于 0 时不显示工具提示。

作为 P.S. 的建议：无论图表的用例是什么，最可能需要显示图表的负值部分。因此，图表的y 轴应覆盖小于 0 的值，而不是忽略这些值。

【讨论】：