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

我花了一段时间才意识到移动画笔时我所做的就是移动矩形。什么控制矩形的位置？ transform 属性。因此，我从代码的矩形绘图部分中获取了相同的转换调用，并将其放入画笔代码中，瞧，它可以工作了。所以我最终的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));
                }