Reduzieren oder Vergrößern von Lücken zwischen Kreisen in D3

Question

Ich versuche, Kreise in einem 3x3-Matrix-Format mit D3 zu zeichnen.

Hier ist mein Code -

<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> 

Wie kann ich reduzieren oder die Lücke zwischen den Kreisen erhöhen meinen Code in d3?

Answer 1

Die Übersetzung der Gruppe bestimmt den Abstand zwischen den Kreisen.

so statt

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

tun, um diese

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

Arbeits Code here