ズーム後の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を更新しました。