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

现在因为我有变焦＆amp;拖动功能，我希望在图表缩放或拖动时也可以更新填充区域。基本上我想要在缩放或拖动之后填充最后一行以下的区域。

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

更新了The C Programming Language。