D3.js update dom элемент текст по клику

Question

Пожалуйста, см. my codepen за то, над чем я работаю.

Когда я нажимаю на легенде (вверху слева), я хотел бы набор данных, которые будут отображаться в соответствии с графиком, я сделал с C3.js

В настоящее время данные добавляются к DOM с p элементами, когда вы щелкните любой элемент легенды. Проблема в том, что текст в этих элементах не очищается и не обновляется, когда вы нажимаете другой элемент легенды. Код, который выполняет это строки 55-61

.on('click', function (id) { 
    chart.data(id)[0].values.map(obj => console.log(obj.value)) 
    d3.select('#values').selectAll("p") 
     .data(chart.data(id)[0].values) 
     .enter() 
     .append('p') 
     .text(function(d) { return d.value }) 

Как я могу иметь D3 очистить значения в #values и обновления с новыми данными, когда я нажимаю на элемент легенды? Я ожидал, что d3 просто обновит значения автоматически, но отобразит только первый набор данных, который был нажат.

Answer 1

Я думаю, что я решил вашу проблему. Просто удаляйте элементы каждый раз перед их добавлением. Вот мясо методом щелчка:

chart.data(id)[0].values.map(obj => console.log(obj.value)) 
    d3.selectAll('.legend_values') 
     .remove(); 
    d3.select('#values').selectAll("p") 
     .data(chart.data(id)[0].values) 
     .enter() 
     .append('p') 
     .text(function(d) { return d.value }) 
     .classed('legend_values', true); 

https://codepen.io/deweyredman/pen/RKeOJp?editors=1010

Теперь объяснение, почему то, что вы уже не работали. В методе click вы использовали «enter». Что происходит с этим - всякий раз, когда в DOM нет элементов для соответствия связанным данным, выполняется код после ввода. Так как всегда имеется одинаковое количество p элементов, соответствующих элементам в наборе данных после щелчка один раз, код ввода ничего не делает. Теперь, если бы были какие-то дополнительные элементы, метод ввода поймал бы их, и вы увидели бы изменение там ... позвольте мне показать вам in this codepen.

Я обновил источник данных в кодеде, чтобы вырасти на один на каждый набор данных. Попробуйте щелкнуть data1, data2, data3 ... и т. Д. Вы увидите это каждый раз, так как новый элемент необходим в dom, потому что набор данных растет каждый раз, добавляется элемент p, соответствующий набору данных CURRENT. Обратите внимание, что когда вы идете назад, элементы не исчезают. Здесь выйдет выход ... Я собираюсь сделать another codepen, чтобы проиллюстрировать эту концепцию:

В этом кодеде вы увидите, что я использую «exit», чтобы удалить любые дополнительные элементы dom, t присутствует в текущем наборе данных. Это, однако, предполагает, что остальные данные одинаковы.

Мой final codepen иллюстрирует, где я использую технику выхода, чтобы каждый раз переустанавливать данные на нуль, прежде чем привязывать их к элементам p, которые добавляются. Это перо действительно достигает того же, что и мой оригинал. Единственное различие здесь в том, что я явно отвязываю и привязываю данные, а в своем оригинале я просто нажимаю на элементы p, чтобы каждый раз запускался метод ввода.

Пожалуйста, дайте мне знать, если это неясно или не имеет для вас никакого смысла.