D3.js и вложенные данные - Почему мой выход () установлена ​​пустым

голоса
0

У меня возникли проблемы при работе с манипулированием данных с вложенным D3.js

Данные состоят из множества объектов , которые представляют categories. Каждая категория имеет несколько checkinсек. Я хочу , раздел для каждого category, и в течение этого, DIV для каждого checkin. Я манипулировать данными с течением времени и полагаться на обновления, входа и выхода из механизмов D3.js правильно вывода данных в DOM.

То, что я не понимаю:

  • Почему , когда второе обновление вызываются, старые данные не отображаются на выходе () множество , и , следовательно , не удаляются?
  • Почему , когда update()вызывается третий раз с data1вновь, записи снова добавляются снова , несмотря на ключевую функцию в данных, при условии ? По моему пониманию в этой точке D3 следует признать , что это на самом деле обновление и данные с тем же ключом уже существует в этом разделе.

Вторая проблема, вероятно, связано с первым, но теперь я не уверен.

Вот интерактивный bl.ocks.org: https://bl.ocks.org/mattleonowicz/fd975a6d914f90c9934464df57e498c9

Тот же код ниже:

<html>
<body>
<div id=app /> 
<script src=https://d3js.org/d3.v5.min.js></script>
<script>
  const data1 = [
  {
    category: {
      id: 1
    },
    checkins: [
      {
        lat: 1,
        lon: 1
      },
      {
        lat: 2,
        lon: 2
      }
      // ... more objects like this would normally be here
    ]
  }
  // ... more objects like this would normally be here
];
const data2 = [
  {
    category: {
      id: 1
    },
    checkins: [
      {
        lat: 3,
        lon: 3
      },
      {
        lat: 4,
        lon: 4
      }
      // ... more objects like this would normally be here
    ]
  }
  // ... more objects like this would normally be here
];

update(data1);
setTimeout(() => update(data2), 2000);
setTimeout(() => update(data1), 4000);

function update(data) {
  const categoriesData = d3.select('#app')
    .selectAll('section')
    .data(data, d => d.category.id);

  // CATEGORIES EXIT
  categoriesData.exit()
    .remove();

  // CATEGORIES UPDATE + ENTER - bind all categories with their checkins
  const checkinsData = categoriesData.enter()
    .append('section')
    .merge(categoriesData)
    .selectAll('section')
    .data(d => d.checkins, d => `${d.lon},${d.lat}`);

  // CHECKINS UPDATE : nothing, because checkins will only come and go

  // CHECKINS EXIT
  checkinsData.exit()
    .remove();

  // CHECKINS ENTER
  checkinsData.enter()
    .append('div')
    .html(d => `${d.lon},${d.lat}`);
}
</script>
</body>
</html>

Задан 27/11/2018 в 15:05
источник пользователем
На других языках...                            


1 ответов

голоса
-2

У вас есть опечатка здесь:

  // CATEGORIES UPDATE + ENTER - bind all categories with their checkins
  const checkinsData = categoriesData.enter()
    .append('section')
    .merge(categoriesData)
->  .selectAll('section')
    .data(d => d.checkins, d => `${d.lon},${d.lat}`);

Вы хотели написать .selectAll('div')во втором отборе.

Ответил 27/11/2018 в 16:06
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more