Шаблон обновления D3 v4 во вложенной модели данных - PullRequest
Новая
       6

Шаблон обновления D3 v4 во вложенной модели данных

0 голосов
/ 07 мая 2018

Недавно я изучаю 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)
}

То, что я собираюсь сделать, это прикрепить блок фрагмента HTML внутри каждого из тд элемент, который связан с массивом данных. Но этот блок элементов очищается, начиная со второго обновления. Почему v4 так себя ведет? Есть ли обходной путь для этого?

1 Ответ

0 голосов
/ 07 мая 2018

Как и в вашем предыдущем вопросе Я не уверен насчет ваших целей здесь. Однако, если я правильно понимаю вашу проблему, вы должны выбрать элемент <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>
...