Question

最近我正在学习D3 v4，它对版本3进行了很多更改。我发现了一个实现以下更新模式的问题，我经常在v3中使用它：

    var data = [
  [1, 2, 3],
  [3, 4, 5]
] 

function update(data) {
  var table = d3.select('#table');
  var tr = table.selectAll('tr')
    .data(data); 

  var rowEnter = tr.enter().append('tr'); 
  tr = rowEnter.merge(tr); 

  var td = tr.merge(rowEnter).selectAll("td").select("div")
    .data(d=>d); 

  var cellEnter = td.enter().append("td")

  var cellContent = cellEnter.append("div")

  cellContent.append("h1")
    .text("Title")

  cellContent.append("h2")
    .merge(td)
    .text(d=>d)

}

update(data)
ref()
function ref() {
  setInterval(()=>{
    for (var i=0; i<2; i++) {
      for (var ii=0; ii<3; ii++) {
        data[i][ii] = Math.floor(Math.random() * 100) + 1
      }
    }
    update(data)
  }, 4000)
}

我要做的是在每个td中附加一段html代码段绑定到数组数据的元素。但是从第二次更新开始，这块元素会被清理干净。为什么v4会那样？这有什么解决方法吗？

Answer 1

与previous question一样，我不确定你的目标。但是，如果我正确理解您的问题，您必须在合并的更新选择中选择<h2>元素：

td = cellEnter.merge(td)
    .select("h2")
    .text(d => d);

以下是修改后的代码段：

var data = [
  [1, 2, 3],
  [3, 4, 5]
]

function update(data) {
  var table = d3.select('#table');

  var tr = table.selectAll('tr')
    .data(data);

  var rowExit = tr.exit().remove();

  var rowEnter = tr.enter().append('tr');

  tr = rowEnter.merge(tr);

  var td = tr.selectAll("td")
    .data(d => d);

  var cellExit = td.exit().remove();

  var cellEnter = td.enter().append("td");

  cellEnter.append("h1")
    .text("Title")
    .append("h2")
    .text(d => d);

  td = cellEnter.merge(td)
    .select("h2")
    .text(d => d);

}

update(data)
ref()

function ref() {
  setInterval(() => {
    for (var i = 0; i < 2; i++) {
      for (var ii = 0; ii < 3; ii++) {
        data[i][ii] = Math.floor(Math.random() * 100) + 1
      }
    }
    update(data)
  }, 1000)
}

table,
tr,
td {
  border: 1px solid gray;
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<table id="table"></table>

嵌套数据模型中的D3 v4更新模式

1 个答案: