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

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

1 个答案: