d3 堆叠和缩放

Question

我创建了一个图表，我手动 stack/overlay 个区域彼此重叠。说来话长，但我需要比 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('svg:path')
            .attr('d', backlogGen(data))

和

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

至

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

和

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

然后在zoomed()结束时，刷新数据。

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

发生的事情是缩放改变了 x 和 y 比例，并且通过调用 backlogGen/reviewGen 它根据新的比例更新图层数据。

此外，根据您的范围，您可能需要将 let 的所有实例更改为 var。

d3 堆叠和缩放

d3 stacking and zoom

javascript

charts

zooming

d3.js