如何在正方形網格周圍添加填充？-有解無憂

我正在嘗試使用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');

}

生成的網格如下所示：

如何在正方形網格周圍添加填充？

如何添加填充？

謝謝！

uj5u.com熱心網友回復：

就我個人而言，我會將線性比例更改為點比例，但這是一個使用大部分代碼的解決方案。

首先，去掉域中的負一，這是創建填充的一種繁瑣方式：

.domain([0, squaresPerRow -1])

然后，在設定填充（此處命名為padding）之后，您可以將x和y位置平移一半，并通過該填充減去矩形的寬度和高度。

padding這是一個演示，為不同的空間更改變數：

顯示代碼片段

const svg = d3.select("div")
  .append('svg')
  .attr('width', 400)
  .attr('height', 400);

let squaresPerRow = 8,
  cellWidth = 40,
  cellHeight = 40,
  padding = 14;

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

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

<script src="https://d3js.org/d3.v7.min.js"></script>
<div></div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/528789.html

標籤：javascriptd3.js

上一篇：如何在d3中永久選擇帶有點擊事件的行？

下一篇：帶有連接節點的鏈接的聚集氣泡