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