d3js放大圈組

Question

我想第一次放大d3.js行爲，我很努力地得到它的工作。我的要求是在svg元素中放大縮小行爲，其中瀏覽器的縮放行爲應該被禁用，並且只有svg內的圓圈在放大/縮小時應該增大/減小其半徑。

總之，當用戶滾動鼠標時，svg的寬度，高度不應該改變。只是圓圈應該改變它的半徑。

這是我現在擁有的，任何人都可以幫我填寫嗎？

<g> 
    <circle id='top' cx="180" cy="120" r="30" style="stroke: white; stroke-width: 2px; fill:white"/> 
</g> 
<g> 
    <circle id='top' cx="200" cy="220" r="30" style="stroke: white; stroke-width: 2px; fill:white"/> 
</g> 
<g> 
    <circle id='top' cx="320" cy="150" r="50" style="stroke: white; stroke-width: 2px; fill:white"/> 
</g> 

var zoom = d3.behavior.zoom() 
      .scaleExtent([1, 8]) 
      .on("zoom", function() { 

      console.log('zooming'); 

      var graph = d3.select('svg'); 

      graph 
       .selectAll('g') 
       .attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 


     }); 



    var svg = d3.select('svg').append('g').call(zoom); 

Answer 1

綁定變焦監聽到SVG而不是新組。

更改下面的代碼行

var svg = d3.select('svg').append('g').call(zoom); 

要

var svg = d3.select('svg').call(zoom); 

完整代碼：

var zoom = d3.behavior.zoom() 
    .scaleExtent([1, 8]) 
    .on("zoom", function() {  
    var graph = d3.select('svg'); 
    graph 
     .selectAll('g') 
     .attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 
    }); 
var svg = d3.select('svg').call(zoom); 

這裏是工作JSFiddle