通过 d3 将行添加到网格布局

Question

我对d3相当陌生，所以我认为这是一个新手问题，b/c我仍然无法理解数据连接。我正在尝试将行添加到网格布局中。每行都表示为具有多个槽的对象，并且行存储在数组中。

在我的

.join

中，我想将 several 元素添加到选择中（内容由对象的插槽决定，这里只是

.text

）。我很难在

.selectAll

调用之前指定 .data 调用。我理解

为什么

会发生这种奇怪的行为（基本上）它试图将数据与选择中的所有div（都是单元格）相匹配。 我需要如何更改 m 代码，每次单击按钮只是添加一个新行？

额外问题：如您所见，细胞全部混合在一起。我如何添加数据

按行

而不是按列？

const data = [
  {cell1: '1/1', cell2: '1/2', cell3: '1/3', id: 1},
  {cell1: '2/1', cell2: '2/2', cell3: '2/3', id: 2}
];


function update(data) {
  d3.select('#grid')
    .selectAll('div')
    .data(data, (d) => d.id)
    .join((enter) => {
      enter.append('div')
        .classed('cell1', true)
        .text((d) => d.cell1);
      enter.append('div')
        .classed('cell2', true)
        .text((d) => d.cell2)
      enter.append('div')
        .classed('cell3', true)
        .text((d) => d.cell3);
  })
}

update(data)

function addRow() {
  const n = data.length + 1;
  const newRow = {cell1: n + '/1', cell2: n + '/2', cell3: n + '/3', id: n};
  data.push(newRow);
  update(data);
}

#grid {
  display: inline-grid;
  grid-template-columns: repeat(3, 200px);
}

#grid > div:nth-of-type(3n+2) {
  background-color: orange;
}

#grid > div:nth-of-type(3n+1) {
  background-color: purple;
}


#grid > div:nth-of-type(3n+0) {
  background-color: forestgreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
<div id="grid">
</div>
<button id="add" onclick="addRow()">Add Row</button>

Answer 1

.selectAll

调用

'div'

，因为这将选择选择中的

all

div，然后连接尝试将 n 行与 n x 3 divs-

 匹配

简单的补救措施是通过

.selectAll('.cell1')

仅选择第一个 div（例如）。这保证了数据中的行与网格中的行之间始终匹配（假定每行包含一个

cell1

类 div。剩下的唯一问题是顺序全乱了，但我会为此提出一个新问题。