d3：積み上げグラフをどのようにズームするには？

Question

ブラシをズームするためのタイムラインを提供するために、より小さなエリアグラフを持つ積み上げ棒グラフと折れ線グラフがあります。私は、ブラシをズームするときに、ブラシを線に影響させることができますが、積み重ねた棒にはできません。

私の折れ線グラフは、そのように宣言されています

var cumulativeLine = d3.line() 
        .x(function(d) { return (x(d.x1) + x(d.x0))/2; }) 
        .y(function(d) { return y1(d.remainingCumulative); }); 

私は（ヒストグラムデータから生成されている）私の積み重ね棒のための同等のものを持っていないのに対し。

svg2.append("g") 
       .selectAll("g") 
       .data(stack(stackData)) 
       .enter().append("g") 
       .attr("fill", function(d) { return colours(d.key); }) 
       .selectAll("rect") 
       .data(function(d) { return d; }) 
       .enter().append("rect") 
       .attr('class', 'data-rect') 
       .transition(t) 
       .attr("x", 1) 
       .attr("transform", function(d) { // transforming is way better looking than setting explicit x and y props. 
        return 'translate('+ x(d.data.x0) + ',' + y(d[1]) + ')'; 
       }) 
       .attr("height", function(d) { return y(d[0]) - y(d[1]); }) 
       .attr("width", function(d) { return (x(d.data.x1) - x(d.data.x0)) - 1; }); 

... svg2は、キャンバスの選択である：それらを描画するには、これは私が持っているものです。これはブラッシング関数である。私はそれをあらかじめ用意されたを与えることができるので

function brushed() { 
        if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom 
        var s = d3.event.selection || xZoom.range(); 
        x.domain(s.map(xZoom.invert, xZoom)); 
        svg2.selectAll(".data-rect").attr("d", function(d) { 
         //console.log(d); // low, high, data 
         return 
        }); 
        svg2.select(".firstline").attr("d", cumulativeLine); 
        svg2.select(".xAxis").call(d3.axisBottom(x)); 
        svg.select(".zoom").call(zoom.transform, d3.zoomIdentity 
         .scale(width/(s[1] - s[0])) 
         .translate(-s[0], 0)); 
       } 

マイラインは、.firstlineラインで（それは余裕の重複がありますが、それは今の私の最大の問題ではありません）主に細かい再レンダリングされます関数。私の質問は、積み重なったバーにどのように同じものを提供できますか？私の積み重なった棒のレンダリングの完全な例（行なし）is here。

Answer 1

ブラシを動かしているときに私がやっていることはすべて、矩形を動かしていることを実感しています。そして、rectsの位置を制御するのは何ですか？ transform属性。だから私はコードのrect部分から同じ変換呼び出しを取り出してブラシコードに入れ、それがうまくいった。したがって、最終的なbrushedの機能は次のようになります。

function brushed() { 
        if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom 
        var s = d3.event.selection || xZoom.range(); 
        x.domain(s.map(xZoom.invert, xZoom)); 
        svg2.selectAll(".data-rect").attr("transform", function(d) { 
         return 'translate('+ x(d.data.x0) + ',' + y(d[1]) + ')'; 
        }) 
        svg2.select(".firstline").attr("d", cumulativeLine); 
        svg2.select(".xAxis").call(d3.axisBottom(x)); 
        svg.select(".zoom").call(zoom.transform, d3.zoomIdentity 
         .scale(width/(s[1] - s[0])) 
         .translate(-s[0], 0)); 
       }