减少或增加D3中圆圈之间的差距

这里是我的代码 -

<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我的代码增加界之间的差距？

来源

2016-05-21 Newbie

该组的翻译是决定圆之间的距离。

所以不是

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

做到这一点

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

工作代码here

来源

2016-05-21 01:00:48 Cyril

减少或增加D3中圆圈之间的差距

回答

相关问题