javascript - 如何在 d3.js 中按行排列矩形

Question

我有 100 个矩形，我想将它们排列成 10x10。我已经能够安排一行和一列，但我很难安排其他九个。 Here is js fiddle:

代码:

var ContainerWidth = document.querySelector('#mainContainer').offsetWidth;
   var rectWidth = ContainerWidth / 20
   console.log(ContainerWidth)
   var svgContainer = d3.select("#boxy")

   var rectangle = svgContainer.selectAll("rect")
     .data((function() {
       var arr = []
       for (var i = 1; i <= 100; i++) {
         arr.push(i)
       }
       return arr
     }()));

   var rectangle = rectangle.enter()
     .append("rect")
     .style("stroke", "black")
     .style("fill", "none")
     .attr("x", function(d, i) {
       if (i % 10 == 0) {
         return 5
       } else {
         return (i*45) + 3;
       }

     })
     .attr("y", function(d, i) {
       if (i % 10 == 0) {
         return i*4.2
       }

     })
     .attr("width", rectWidth)
     .attr("height", rectWidth);

结果应该是这样的

Answer 1

首先，您可以将数据简化为:

.data(d3.range(100));

要用你的矩形制作矩阵，你可以使用:

 .attr("x", (d,i) => i%10 * 45)
 .attr("y", (d,i) => Math.floor(i/10)%10 * 45)

这是一个演示:

var ContainerWidth = document.querySelector('#mainContainer').offsetWidth;
var rectWidth = ContainerWidth / 20;
var svgContainer = d3.select("#boxy");

var rectangle = svgContainer.selectAll("rect")
    .data(d3.range(100));

rectangle.enter()
    .append("rect")
    .style("stroke", "black")
    .style("fill", "none")
    .attr("x", (d,i) => i%10 * 45)
    .attr("y", (d,i) => Math.floor(i/10)%10 * 45)
    .attr("width", rectWidth)
    .attr("height", rectWidth);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='mainContainer'>
  <svg id="boxy" viewBox="0 0 960 500" preserveAspectRatio="xMidYMid meet">
  </svg>
</div>

另一个片段向您展示了绑定(bind)到每个矩形的数据:

var ContainerWidth = document.querySelector('#mainContainer').offsetWidth;
var rectWidth = ContainerWidth / 20;
var svgContainer = d3.select("#boxy");

var rectangle = svgContainer.selectAll("rect")
    .data(d3.range(100));

rectangle.enter()
    .append("rect")
    .style("stroke", "black")
    .style("fill", "none")
    .attr("x", (d,i) => i%10 * 45)
    .attr("y", (d,i) => Math.floor(i/10)%10 * 45)
    .attr("width", rectWidth)
    .attr("height", rectWidth);

rectangle.enter()
     .append("text")
     .attr("x", (d,i) => i%10 * 45 + 4)
     .attr("y", (d,i) => Math.floor(i/10)%10 * 45 + 16)
     .text((d,i)=>d);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='mainContainer'>
  <svg id="boxy" viewBox="0 0 960 500" preserveAspectRatio="xMidYMid meet">
  </svg>
</div>