CODEWITHSUNDEEP
javascriptd3.js
Newbie
Newbie

Reputation: 2708

Reduce or Increase Gap Between Circles in D3

I am trying to draw circles in a 3X3 matrix format using D3.

Here is my 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>

How can I reduce or increase the gap between the circles using my code in d3?

Upvotes: 2

Views: 979

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

The translate on the group is deciding the distance between the circles.

so instead of 

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

do this 

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

working code here

Upvotes: 1

Related Questions