如何使用D3js绘制像墙砖结构一样放置的矩形？

Question

我对D3js还是很陌生，我希望根据所附图片绘制类似这样的内容。因此，我的要求是放置SVG矩形，使其看起来像带有随机数据的墙砖。

必须感谢您的帮助。谢谢。

Answer 1

这里是在D3中绘制砖块的示例。

// array = input array
// part = size of the chunk
function splitArray(array, part) {
    var tmp = [];
    for(var i = 0; i < array.length; i += part) {
        tmp.push(array.slice(i, i + part));
    }
    return tmp;
}

// Create range
const margin = { left: 10, top: 10, right: 10, bottom: 10 };
const vals = [...Array(12).keys()].map(i => `rect val ${i}`);
const layers = 3;
const brickSize = { height: 60, width: 100 };
const cement = { thickness: 5 };

const valsReshaped = splitArray(vals, layers);

const svg = d3.select('#wall')
    .attr('width', (valsReshaped[0].length + 0.5) * (brickSize.width + cement.thickness) + margin.left + margin.right)
    .attr('height', valsReshaped.length * (brickSize.height + cement.thickness) + margin.top + margin.bottom);

const wall = svg.append('g')
    .attr('transform', `translate(${margin.left},${margin.top})`);

const layer = wall.selectAll('g.layer')
    .data(valsReshaped).enter()
  .append('g')
    .attr('class', 'layer')
    .attr('transform', (d, i) => {
        const x = (i % 2) * (brickSize.width + cement.thickness) * 0.5;
        const y = i * (brickSize.height + cement.thickness); 
        return `translate(${x},${y})`;
    });
  
const bricks = layer.selectAll('g.brick')
    .data(d => d).enter()
  .append('g')
    .attr('class', 'brick')
    .attr('transform', (d, i) => `translate(${i * (brickSize.width + cement.thickness)},0)`);

bricks.selectAll('rect')
    .data(d => [d]).enter()
  .append('rect')
    .attr('class', 'brick')
    .attr('x', 0)
    .attr('y', 0)
    .attr('rx', 10)
    .attr('ry', 10)
    .attr('width', brickSize.width)
    .attr('height', brickSize.height);

bricks.selectAll('text')
    .data(d => [d]).enter()
  .append('text')
    .attr('x', (brickSize.width + cement.thickness) / 2)
    .attr('y', (brickSize.height + cement.thickness) / 2)
    .text(d => d);

.brick > rect {
  fill: #aa3311;
  stroke: darkred;
  stroke-width: 2px;
}
.brick > text {
  fill: white;
  text-anchor: middle;
  font: 12px sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<svg id="wall"></svg>