Question

我想在json中为每个属性绘制4个不同的矩形。所以我需要为每个id绘制4个矩形。在下面的例子中，我将有16个矩形用于id 1-4。

现在，矩形的宽度，高度都是硬编码的。也是x和y轴。

目前，每行都是一个矩形。？

我有这样的json数据：

[
   [{ "checkins":10},{"builds":11},{"oss":1},{"appsec":10},{"id":1}],
   [{ "checkins":1},{"builds":1},{"oss":21},{"appsec":10},{"id":2}],
   [{ "checkins":11},{"builds":3},{"oss":11},{"appsec":10},{"id":3}],
   [{ "checkins":21},{"builds":20},{"oss":3},{"appsec":30},{"id":4}]
]

我写了代码：

var x_axis = 1;
var y_axis = 45;
var xvar;
var yvar;
var x;
    d3.json("GraphData.json", function(data) 
    {

        var rectangle=                 svggraph.selectAll("rect").data(data).enter().append("rect");
        var RectangleAttrb = rectangle
                           .attr("id", function (d,i) { return "id" + i ; })
                                 .attr("x", function (d,i) 
                                  {
                                xvar=i+1;
                                                if(i==0) return x_axis=0;

                                if ((i > 0) && (xvar%4==1))
                                {
                                            x_axis = 0;

                                }
                                                else
                                {
                                                      x_axis=x_axis+22;
                                }
                                //y=i+1;
                                return x_axis; 
                                           })
                               .attr("y", function (d,i) 
                              { 
                                Yvar=i+1;

                                if ((i > 0) && (Yvar%4==1))
                                {
                                            y_axis = y_axis+ 30;

                                }
                                return y_axis; 
                               })

                       .attr("width",function(d) { return 20; } )
                       .attr("height",function(d) { return 15; })
                       .style("stroke", function (d) { return "black";})
                       .style("fill", function(d) { console.log(d);return "white"; });


    });

它仍然只创建了4个矩形

Answer 1

我找到了一种解决方法。它正在创建一个数组并循环遍历它以创建矩形并指定x和y轴以及高度和宽度。

<html>

<script>


 var x_axis = 1;
    var y_axis = 45;
      var x;
      var rectangle,RectangleAttrb;
      var rect;
      var rectdata;


createtinderboxes();

function createtinderboxes()
{

    //console.log(" the function is called "); 



    d3.json("GraphData.json", function(data) 
    {
        rectdata = data;

            //console.log(rectdata.length);

        for(x=0;x<rectdata.length;x++)
        {


          console.log(rectdata[x]);
          for (index=0;index<5; index++)
          {
            svggraph.append("rect")
                              .attr("x", assignxaxis(rectdata, index)) 
                              .attr("y", assignyaxis(rectdata,yvar))
                              .attr("width", 20)
                              .attr("height", 25)
                              .style("fill","white")    
                              .style("stroke","black");
          }

            yvar = yvar+26;
        }



    });


}

function assignxaxis(rectdata,x)
{

    console.log(rectdata[x]);
    if (x==4) return;

    if(x==0) 
    {
        return x_axis=0
    }
    else
    {
        x_axis=x_axis+22;
    }

    return x_axis; 

}


function assignyaxis(rectdata,y)
{

    return y; 


}

</script>
</html>

如何为d3.js中的每一列绘制矩形

1 个答案: