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。而什麼控制了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)); 
       }