javascript - D3.js图表​​调用并缩放后重新绘制区域

Question

我对 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);

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

Area update not working after zoom

以下是缩放功能:-

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) + ")"; }
        );  
    }

JS Fiddle code

Answer 1

您需要更新缩放函数处理程序中的区域 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)");

已更新fiddle .