Question

我创建了一个图表，我手动堆叠/覆盖彼此顶部的区域。很长一段时间，但我需要更多控制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堆叠和缩放

1 个答案: