d3js散點圖中的縮放功能

Question

我正在嘗試對散點圖中的軸進行縮放，這就是我嘗試過的

var zoom = d3.zoom()
    .scaleExtent([1, 5])
    .extent([100, 100], [width - 100, height - 100])
    .on("zoom", zoomed);

    var gX;
    var gY;
xScale = d3.scaleLinear().range([0, width])
yScale = d3.scaleLinear().range([height, 0])

    function zoomed() {
        svg.selectAll(".charts")
            .attr("transform", d3.event.transform);
        d3.selectAll('.dot').style("stroke-width", 2 / d3.event.transform.k);
        gX.call(xAxis.scale(d3.event.transform.rescaleX(xScale)));
        gY.call(yAxis.scale(d3.event.transform.rescaleY(yScale)));
    }

我像下面一樣附加了gX和gY

gX = svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
        gY = svg.append("g")
             .attr("class", "axis axis--y")
             .call(yAxis)

當我確實放大圓圈寬度而不是放大軸時，我猜我在gX.call和gY.call上做錯了，我無法弄清楚。 有什么建議么？？

Answer 1

我做了這樣的事...
像這樣調用zoom on select

var svg = d3.select("div#ScatterPlot svg").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .call(d3.zoom().on("zoom", zoom));

var gX = svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
var gY = svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)

var circles = svg.selectAll(".dot")
          .data(data)
        .enter().append("circle")
        .attr("class", "dot")....

function zoom() {
            gX.call(xAxis.scale(d3.event.transform.rescaleX(xScale)));
            gY.call(yAxis.scale(d3.event.transform.rescaleY(yScale)));

            var new_XScale = d3.event.transform.rescaleX(xScale);
            var new_yScale = d3.event.transform.rescaleY(yScale);

            circles.attr("cx", function (d) { return new_XScale(d.xAxisValue) });
            circles.attr("cy", function (d) { return new_yScale(d.yAxisValue) });
        }