減少或增加D3中圓圈之間的差距

Question

我想用D3以3X3矩陣格式繪製圓圈。

這裏是我的代碼 -

<script src="//d3js.org/d3.v3.min.js"></script> 
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script> 

<div class="barChart"></div> 
<div class="circles"></div> 
<style> 

</style> 
<script> 

$(document).ready(function() { 


    circles(); 
    $(".circles").show(); 
    function circles() { 
     var svg = d3.select(".circles").append("svg").attr({ 
      'height' : '400px' 
     });; 

     var data = ["Z","Z","Z","Z","Z","Z","Z","Z","Z"]; 
     var groups = svg.selectAll("g") 
      .data(data).attr("width",200).attr("height",200) 
      .enter() 
      .append("g"); 

     groups.attr("transform", function(d, i) { 
    var x = (i % 3) * 100 + 50; // x varies between 200 and 500 
    var y = 50 * Math.floor(i/3) + 50 ; // y varies between 100 and 250 

    return "translate(" + [x,y] + ")"; 
    }); 

     var circles = groups 
     .append("circle") 
     .attr("cx", "0") 
     .attr("cy", "0") 
     .attr("r", "30") 
     .attr("fill","#92c260") 
     .style("stroke-width","2px"); 
     var label = groups.append("text") 
      .text(function(d){ 
       return d; 
      }) 
      .style({ 
       "alignment-baseline": "middle", 
       "text-anchor": "middle", 
       "font-family":"Arial", 
       "font-size":"30", 
       "fill":"white" 
      }); 
    } 
}); 
</script> 

如何減少或使用D3我的代碼增加界之間的差距？

Answer 1

該組的翻譯是決定圓之間的距離。

所以不是

var x = (i % 3) * 100 + 100; 

做到這一點

var x = (i % 3) * 40 + 100;//so changing the x will reduce the distance between each circle. 

工作代碼here