Question

我正在尝试使用d3.js以3x3格式绘制9个圆圈。这是我的剧本： -

<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");

        var data = ["Z","Z","Z","Z","Z","Z","Z","Z","Z"];
        var groups = svg.selectAll("g")
            .data(data).attr("width",100).attr("height",100)
            .enter()
            .append("g");

        groups.attr("transform", function(d, i) {
            var x = 100;
            console.log(i);
            var y = 50 * i + 100 ;

            return "translate(" + [x,y] + ")";
        });

        var circles = groups.append("circle")
                    .attr({cx: function(d,i){
                              return 0;
                            },
                            cy: function(d,i){
                              return 0;}})

                    .attr("r", "20")
                    .attr("fill", "red")
                    .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"
            });
    }
});

但是，我只是得到了一些半圈。

而且，我试图在数据中只有一个值，并试图在循环中运行圆圈（），但我得到一个直线的圆圈，它们之间有很多间距

for (var i = 0; i <=8 ;i++){
      circles();
}

和

 var groups = svg.selectAll("g")
            .data("Z").attr("width",100).attr("height",100)
            .enter()
            .append("g");

如果我按照第二种方法，我会得到一条直线并且间距很大的圆圈。那么如何在图中得到圆圈并且间距更小？任何人都可以帮助我

Answer 1

您的转换功能是将元素放在一行而不是网格中。如果你注销你正在翻译的内容，你会看到发生了什么。即。

console.log("translate(" + [x,y] + "");
/* OUTPUTS
translate(100,100)
translate(100,150)
translate(100,200)
translate(100,250)
translate(100,300)
translate(100,350)
translate(100,400)
translate(100,450)   
translate(100,500)
translate(100,100)
*/

它们被垂直堆叠在另一个上面。

您可以通过更改以下行来修改转换函数：

var x = 100 + (50* Math.floor(i/3));           
var y = 50 * (i%3) + 20 ;

最后，SVG容器正在剪裁您的绘图，因此您只能看到150px以下的任何一半。

您可以按如下方式修改宽度：

var svg = d3.select(".circles")
            .append("svg")
            .attr({"height": '300px'});

Answer 2

修复代码的最简单方法是修改组转换

groups.attr("transform", function(d, i) {
    var x = (i % 3) * 100 + 200; // x varies between 200 and 500
    var y = 50 * Math.floor(i / 3) + 100 ; // y varies between 100 and 250

    return "translate(" + [x,y] + ")";
});

此处，i将在0到8之间循环，因为您的data变量中有8个元素，x分配中，i%3值0,1,2,0,1,2,0,1,2，并且y分配，Math.floor(i / 3)值得0,0,0,1,1,1,2,2,2所以你基本上得到了一个2D网格：

0,0 1,0 2,0
1,0 1,1 2,1
2,0 2,1 2,2

使用3x3格式的d3.js绘制多个圆圈

2 个答案: