Javascript 在d3.js中隐藏折线图的负部分

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

这很好，但我需要的只是隐藏X轴下面的线的一部分。我想保持这些值不变，只需使用一些CSS或JS使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);

---

Fiddle:

解决此问题的一种方法是将线夹在覆盖正值区域的矩形内。在SVG中，这是通过

这分为两个步骤：

在

clipPath

内定义一个

rect

，仅覆盖图表区域：

使用

Clip path

属性剪裁线路径：

更新了实现解决方案的JSFIDLE:

剩下要做的是更新工具提示的

mousemove

事件侦听器，以便在值低于0时不显示工具提示

建议附言：无论图表的用例是什么，最有可能的是用负值显示图表的部分。因此，图表的

y

轴应覆盖小于0的值，而不是忽略这些值

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

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