我正在尝试让Zoom工作，我是D3的新手，我发现它非常抽象，不直观。我最近完成了JavaScript的初学者课程，但D3感觉像是一种全新的语言。
我找到了这个主题，可能会有一点帮助。D3 Zooming in graph
我还在Web上找到了以下创建图形的代码，这是我能找到的最简单的，但我并不完全理解。现在我想放大，并使用了我在网上找到的代码，但必须进行调整。我很清楚，顶部的缩放变量调用了一个名为NeuerChart的函数，该函数具有实际的缩放行为。当我旋转鼠标滚轮时，它需要缩放图形和轴。
最后，我需要将其实现为一个真实的的问题，谢谢。使用D3.v5。

<script>
        let zoom = d3.zoom()
            .scaleExtent([0.5, 10])
            .extent([[0, 0], [width, height]])
            .on('zoom', NeuerChart);

        // Step 1

        let min = 0;
        let max = 100;
        let x_arr = [];
        let y_arr = [];
        let s_arr = [];
        let z_arr = [];

        for (let i = 0; i < 360; i++) {
            var r = Math.round(Math.random() * (max - min)) + min;
            x_arr[i]= i;
            y_arr[i]= r;
            z_arr.push([x_arr[i],y_arr[i]]);
        }

        s_arr = y_arr.sort(function(a, b){return a - b});

        let neu_arr = [];
        let zz_arr = [];

        for (let i = 0; i < 360; i++) {
            neu_arr[i]= i;
            zz_arr.push([neu_arr[i], s_arr[i]]);
        }

        console.log(z_arr);
        console.log(zz_arr);

        var dataset1 = zz_arr;

        // Step 3
        var svg = d3.select("svg"),
            margin = 200,
            width = svg.attr("width") - margin, //1700
            height = svg.attr("height") - margin //700

        // Step 4 
        var xScale = d3.scaleLinear().domain([0 , 365]).range([0, width]),
            yScale = d3.scaleLinear().domain([0, 105]).range([height, 0]);

        var g = svg.append("g")
            .attr("transform", "translate(" + 100 + "," + 100 + ")");

        // Step 5
        // Title
        svg.append('text')
        .attr('x', width/2 + 100)
        .attr('y', 100)
        .attr('text-anchor', 'middle')
        .style('font-family', 'Helvetica')
        .style('font-size', 20)
        .text('Line Chart');

        // X label
        svg.append('text')
        .attr('x', width/2 + 100)
        .attr('y', height - 15 + 150)
        .attr('text-anchor', 'middle')
        .style('font-family', 'Helvetica')
        .style('font-size', 12)
        .text('Zeitachse');

        // Y label
        svg.append('text')
        .attr('text-anchor', 'middle')
        .attr('transform', 'translate(60,' + 500  + ')rotate(-90)')
        .style('font-family', 'Helvetica')
        .style('font-size', 12)
        .text('Wert');

        // Step 6
        g.append("g")
         .attr("transform", "translate(0," + height + ")")
         .call(d3.axisBottom(xScale).ticks(7).tickValues([0, 60, 120, 180, 240, 300, 360]));

        g.append("g")
         .call(d3.axisLeft(yScale));

        // Step 7
        svg.append('g')
        .selectAll("dot")
        .data(dataset1)
        .enter()
        .append("circle")
        .attr("cx", function (d) { return xScale(d[0]); } )
        .attr("cy", function (d) { return yScale(d[1]); } )
        .attr("r", 3)
        .attr("transform", "translate(" + 100 + "," + 100 + ")")
        .style("fill", "#CC0000");

        // Step 8        
        var line = d3.line()
        .x(function(d) { return xScale(d[0]); }) 
        .y(function(d) { return yScale(d[1]); }) 
        .curve(d3.curveMonotoneX)

        svg.append("path")
        .datum(dataset1) 
        .attr("class", "line") 
        .attr("transform", "translate(" + 100 + "," + 100 + ")")
        .attr("d", line)
        .style("fill", "none")
        .style("stroke", "#CC0000")
        .style("stroke-width", "2")

        svg.append("rect")
            .attr("width", width)
            .attr("height", height)
            .style("fill", "none")
            .style("pointer-events", "all")
            .attr("transform", "translate(" + 100 + "," + 100 + ")")
            .call(zoom);

        function NeuerChart () {
            // recover the new scale
            var newX = d3.event.transform.rescaleX(xScale);
            var newY = d3.event.transform.rescaleY(yScale);

            // update axes with these new boundaries
            xAxis.call(d3.axisBottom(newX))
            yAxis.call(d3.axisLeft(newY))
        }

</script>

我在Codepen中添加了以下代码：https://codepen.io/Dvdscot/pen/zYjpzVP
这是它应该如何工作：https://codepen.io/Dvdscot/pen/BaxJdKN