Javascript D3.js图表调用并在缩放后重新绘制区域

我是d3.js的新手。我使用一些数据制作了多折线图，并且该图具有缩放功能，效果非常好。现在，我想对底线下方的区域进行着色，我使用了以下代码：-

var area = d3.svg.area()
    .x(function(d) { return x(d.x); })
    .y0(height)
    .y1(function(d) { return y(d.y); });

svg.append("path")
    .datum(dataBelowLine)
    .attr("class", "areaAbove")
    .attr("d", area);

现在，由于我有缩放和拖动功能，我希望填充区域也能在图表缩放或拖动时更新。基本上，我想下面的最后一行区域填充，即使在缩放或拖动以及

以下是缩放功能：-

function zoomed() {
        svg.select(".areaAbove").call(area);

        svg.select(".x.axis").call(xAxis);
        svg.select(".y.axis").call(yAxis);  

        svg.selectAll('path.line').attr('d', line);  

        points.selectAll('circle').attr("transform", function(d) { 
            return "translate(" + x(d.point.x) + "," + y(d.point.y) + ")"; }
        );  
    }

---

您需要更新缩放功能处理程序中的area

d

属性：

function zoomed() {
  svg.select(".areaAbove").call(area);

  svg.select(".x.axis").call(xAxis);
  svg.select(".y.axis").call(yAxis);

  svg.selectAll('path.line').attr('d', line);

  svg.select('.areaAbove').attr('d', area); //<-- add this!

  points.selectAll('circle').attr("transform", function(d) {
    return "translate(" + x(d.point.x) + "," + y(d.point.y) + ")";
  });
}

---

更新。

哇！成功了！不幸的是，我需要更多的代表投票支持你的答案！！这就是我想要的！你能帮我解答这个问题吗？？

svg.append("path")
  .datum(dataBelowLine)
  .attr("class", "areaAbove")
  .attr("d", area)
  .attr("clip-path", "url(#clip)");