如何在 JavaScript D3 中放大圖形

Question

我正在嘗試讓 Zoom 工作，我是 D3 的新手，我發現它非常抽象且不直觀。 我最近在 JavaScript 完成了初學者課程，但 D3 感覺像是一種全新的語言。

我發現這個主題可能會有所幫助。 D3 放大圖形

我還發現了以下在 web 上創建圖表的代碼，這是我能找到的最簡單的代碼，但我並不完全理解。 現在我想放大並使用我也在 web 上找到的代碼，但必須對其進行調整。 我明白頂部的縮放變量正在調用一個名為 NeuerChart 的 function，它具有實際的縮放行為。 當我旋轉鼠標滾輪時，它需要縮放圖形和軸。

最后，我需要將其實現為一個真正的問題，謝謝。 使用 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

Answer 1

問題已解決，參見Codepen的代碼：`

重置縮放`https://codepen.io/Dvdscot/pen/zYjpzVP