多系列 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));
        }
    }

還附上了工作小提琴，在演示中，您可以清楚地看到鼠標滾動，只有一個線系列被放大，另一個固定不變。 不知道如何解決這個問題。 需要 D3 忍者的幫助。

Answer 1

通常我們會在數組中同時使用[{line: line, data: data1}, {line: line100, data: data2}]和 line 生成器函數： [{line: line, data: data1}, {line: line100, data: data2}] ，使用selectAll()綁定到每個 SVG 行。

但是因為兩條線的數據相同，我們可以走一點捷徑，只使用線生成器，每次使用相同的數據：

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

這將選擇所有現有path元素，將線生成器綁定到每個元素，然后使用我們綁定的線生成器生成新路徑，使用數據連接。

JSFiddle