缩放仅缩放我的坐标轴，而不是我图上的对象

Question

我有一个当前的缩放功能，我刚刚学会在D3中使用。但是，当我使用它时，它只会移动我的和缩放图形的轴而不是其上的对象。

我很了解D3，并希望得到一些帮助。

的JavaScript的我的源代码发布如下：

//Setting generic width and height values for our SVG. 
    var margin = {top: 60, right: 0, bottom: 60, left: 40}, 
     width = 1024 - 70 - margin.left - margin.right, 
     height = 668 - margin.top - margin.bottom; 

    //Other variable declarations. 


    //Creating scales used to scale everything to the size of the SVG. 
    var xScale = d3.scale.linear() 
     .domain([0, 1024]) 
     .range([0, width]); 

    var yScale = d3.scale.linear() 
     .domain([1, 768]) 
     .range([height, 0]); 

    //Creates an xAxis variable that can be used in our SVG. 
    var xAxis = d3.svg.axis() 
     .scale(xScale) 
     .orient("bottom"); 

    var yAxis = d3.svg.axis() 
     .scale(yScale) 
     .orient("left"); 

    //Zoom command ... 
    var zoom = d3.behavior.zoom() 
     .x(xScale) 
     .y(yScale) 
     .scaleExtent([1, 10]) 
     .on("zoom", zoomed); 


    // The mark '#' indicates an ID. IF '#' isn't included argument expected is a tag such as "svg" or "p" etc.. 
    var SVG = d3.select("#mainSVG") 
       .attr("width", width + margin.left + margin.right) 
       .attr("height", height + margin.top + margin.bottom) 
       .append("g") 
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
       .call(zoom); 


    //Create background. The mouse must be over an object on the graph for the zoom to work. The rectangle will cover the entire graph. 
    var rect = SVG.append("rect") 
     .attr("width", width) 
     .attr("height", height); 

    //This selects 4 circles (non-existent, there requires data-binding) and appends them all below enter. 
    //The amount of numbers in data is the amount of circles to be appended in the enter() section. 
    var circle = SVG 
     .selectAll("circle") 
     .data([40,100,400,1900]) 
     .enter() 
      .append("circle") 
      .attr("cx",function(d){return xScale(d)}) 
      .attr("cy",function(d){return xScale(d)}) 
      .attr("r",20); 

    //This appends a circles to our SVG. 
    var circle = SVG 
     .append("circle") 
     .attr("cx",function(d){ return xScale(d)}) 
     .attr("cy",300) 
     .attr("r",20); 



    //Showing the axis that we created earlier in the script for both X and Y. 
    var xAxisGroup = SVG.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    var yAxisGroup = SVG.append("g") 
     .attr("class", "y axis") 
     .call(yAxis); 

    function zoomed() { 
     SVG.select(".x.axis").call(xAxis); 
     SVG.select(".y.axis").call(yAxis); 
    } 

Answer 1

您还需要重绘所有与变焦改变轴的元素 - D3不会自动为您做到这一点：

function zoomed() { 
    SVG.select(".x.axis").call(xAxis); 
    SVG.select(".y.axis").call(yAxis); 

    SVG.selectAll("circle") 
     .attr("cx",function(d){return xScale(d)}) 
     .attr("cy",function(d){return xScale(d)}); 
}