Javascript d3堆叠和缩放

我创建了一个图表，手动将各个区域堆叠/叠加在一起。说来话长，但我需要更多的控制，通常的堆叠来与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);

        }

---

我的问题是如何进行实际的区域缩放？我能把它们分组吗？任何帮助都会很好

您需要更新每个层。首先，应保存对每个图层的引用，更改：

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

及

到

及

然后在

zoomed（）

的末尾刷新数据

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

正在发生的是缩放会更改x和y比例，通过调用

backlogGen

/

reviewGen

它会根据新比例更新图层数据

---

另外，根据您的范围，您可能需要将

let

的所有实例更改为

var

的完美实例！！！现在我只需要弄清楚如何进行剪辑，这样图表就不会到处出血！但真的谢谢你！！

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

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

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