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

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

1 个答案: