d3スタッキングとズーム

Question

私は、手作業で重ねて、重ねて表示するグラフを作成しました。長い話ですが、私はd3に付属している通常のスタッキングよりも多くの制御が必要でした。以下は

は、私は、チャートに各エリアを追加する方法のほんの一部です：

let backlogGen = d3.svg.area() 
      .x(function(d) { return x(d.projectDate); }) 
      .y0(height) 
      .interpolate("cardinal") 
      .y1(function(d) { return y(d.backlog); }); 

let reviewGen = d3.svg.area() 
      .x(function(d) { return x(d.projectDate); }) 
      .y0(height) 
      .interpolate("cardinal") 
      .y1(function(d) { return y(d.uxreview); }); 

svg.append('syg:path') 
      .attr('d', backlogGen(data)) 
      .attr("fill-opacity","1") 
      .attr('fill', 'rgb(49, 130, 189)') 

svg.append('svg:path') 
      .attr('d', reviewGen(data)) 
      .attr("fill-opacity",".9") 
      .attr('fill', 'rgb(230, 85, 13)') 

は、今私は、xとyをズームしますズーム機能を持つ：

function zoomed() { 
      console.log(d3.event.translate); 
      console.log(d3.event.scale); 

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

     } 

私の質問はどのようにあります実際のエリアもズームしますか？私はどういうわけかそれらをグループ化しますか？どんな助けも素敵でしょう!!

Answer 1

各レイヤーを更新する必要があります。まず、変更、各層への参照を保存する必要があります。

svg.append('syg:path') 
      .attr('d', backlogGen(data)) 

と

svg.append('svg:path') 
      .attr('d', reviewGen(data)) 

を

let backlogLayer = svg.append('syg:path') 
      .attr('d', backlogGen(data)) 

とzoomed()の終わりで、その後

let reviewLayer = svg.append('syg:path') 
      .attr('d', reviewGen(data)) 

、リフレッシュにそのdat a。何が起こっている

backlogLayer.attr('d', backlogGen(data)); 
reviewLayer.attr('d', reviewGen(data)); 

はズームが、xとyのスケールを変更し、backlogGen/reviewGen呼び出すことによって、それが新しい尺度に基づいてレイヤデータを更新することです。

また、スコープによっては、letのすべてのインスタンスをvarに変更する必要があります。