多系列 d3js v5 图表的折线图缩放

Question

我正在尝试实现 d3js 折线图的缩放。它适用于单系列产品，但不适用于多系列产品。这是svg缩放功能

function zoom(svg) {

        var extent = [
            [margin.left, margin.top], 
            [width - margin.right, height - margin.top]
        ];

        var zooming = d3.zoom()
            .scaleExtent([1, 3])
            .translateExtent(extent)
            .extent(extent)
            .on("zoom", zoomed);

        svg.call(zooming);

        function zoomed() {

            x.range([margin.left, width - margin.right]
                .map(d => d3.event.transform.applyX(d)));

            // for single series
            svg.select(".path")
                .attr("d", line);

            svg.select(".x-axis")
                .call(d3.axisBottom(x)
                    .tickSizeOuter(0));
        }
    }

另外附上工作fiddle，在演示中你可以清楚地看到鼠标滚动，只有一个线系列被缩放，另一个被固定。不知道如何解决这个问题。需要 D3 忍者的帮助。

Answer 1

通常我们会在一个数组中同时使用数据和行生成器函数：[{line: line, data: data1}, {line: line100, data: data2}]，用selectAll()绑定到每个 SVG 行。

但由于两条线的数据相同，我们可以走一条捷径，只使用线生成器，每次使用相同的数据：

svg.selectAll(".path")
    .data([line, line100])
    .join("path")
    .attr("d", lineGenerator => lineGenerator(data));

这会选择所有现有的path 元素，为每个元素绑定一个行生成器，然后使用我们绑定的行生成器来生成新路径using the data join。

JSFiddle