Question

我试图用d3.js

每行打印x个矩形

        var rectangle = svgContainer.selectAll("rect").data(data).enter().append("rect")
       .attr("x", function(d,i){ return i*5})
       .attr("y", function(d,i){ return i+1})
       .attr("width", 50)
       .attr("height", 50)

我知道我需要修改y属性，但我觉得我一直在盲目地改变值，直到我的矩形打印为

 [][][][][][]
 [][][][][][]
 [][][][][][]

而不是

      [[][[][[[][[][[][[]

或

我是否可以对如何提出相应的打印公式有所了解？

谢谢

Answer 1

像这样......

    var rectangle = svgContainer.selectAll("rect").data(data).enter().append("rect")
   .attr("x", function(d,i){ return (i%5) * 60})
   .attr("y", function(d,i){ return Math.floor(i / 5) * 60})
   .attr("width", 50)
   .attr("height", 50)

你的作品是高度和宽度50，所以60应该确保它们之间有一些间隙。 50将导致没有间隙和少于50个重叠矩形。

％是remainder operator我们想要除以5之后的余数。

使用javascript和d3.js每行打印x个元素

1 个答案: