我正在尝试使用D3创建一个正方形网格。我的代码可以工作，但是我想在每个正方形周围添加一些填充，这样网格看起来就不那么“紧凑”了。
下面是我的代码：

class Matrix {

    constructor(parentElement, data1, data2, data3) {
        this.parentElement = parentElement;
        this.data1 = data1;
        this.data2 = data2;
        this.data3 = data3;

        this.cellHeight = 40;
        this.cellWidth = 40;

        this.initializeVisual()

    }

    initializeVisual() {
        let vis = this;

        vis.margin = {top: 20, right: 20, bottom: 20, left: 40};
        vis.width = document.getElementById(vis.parentElement).getBoundingClientRect().width - vis.margin.left - vis.margin.right;

        vis.height = 800 - vis.margin.top - vis.margin.bottom;

        // init drawing area
        vis.svg = d3.select('#' + vis.parentElement).append('svg')
            .attr('width', vis.width + vis.margin.left + vis.margin.right)
            .attr('height', vis.height + vis.margin.top + vis.margin.bottom)
            .append('g')
            .attr('transform', `translate (${vis.margin.left}, ${vis.margin.top})`);

        // Draws the initial grid

        let squaresPerRow = 16

        let scale = d3.scaleLinear()
            .domain([0, squaresPerRow -1])
            .range([0, this.cellWidth * squaresPerRow])

        vis.squares = vis.svg.selectAll('.squares')
            .data(d3.range(256))
            .enter()
            .append('rect')
            .attr('x', (d, i) => {
                let n = i % squaresPerRow
                return scale(n)
            })
            .attr('y', (d, i) => {
                let n = Math.floor(i / 16)
                return scale(n)
            })
            .attr('width', this.cellWidth)
            .attr('height', this.cellHeight)
            .attr('fill', 'lightgrey');

}

生成的网格如下所示：

如何添加填充？
谢谢你！