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