Блог

Главная - Вопросы по программированию - Вызовы D3 data join() вводят вместо обновления

Вызовы D3 data join() вводят вместо обновления

#d3.js #observablehq

#d3.js #observablehq

Вопрос:

Я хотел бы обновить значения ячеек name и rating на основе данных, выбранных при вводе. Всякий раз, когда входные данные изменяются, вводятся новые значения, но функции обновления и выхода не запускаются (значения не становятся зелеными или красными). Есть идеи, что я делаю не так? Действующую версию кода можно найти здесь:

https://observablehq.com/@nvelden/table-merge

 const div = d3.create('div')
.style('display', 'flex');
const columNames = ["name", "rating"];

let headColumns = div
.selectAll('div')
.data(columNames)
.enter()
.append('div')
.text(d => d)
.attr('id', d => `Head-${d}`)
.attr('class', 'headColumns'); 
  
let names = div.selectAll('#Head-name')
  .selectAll('div')
  .data(dataInput(dataSelect), d => d.name)
  .join(
    enter => enter
  .append("div")
  .text(d => d.name)
  .style('opacity', 1),
   update => update
  .style('color', 'green')
  .style('opacity', 1),
    exit => exit
  .style('color', 'red')
  )
  .attr('class', 'cell');
  
let ratings = div.selectAll('#Head-rating')
  .selectAll('div')
  .data(dataInput(dataSelect), d => d.rating)
  .join(
    enter => enter
  .append("div")
  .text(d => d.rating)
  .style('opacity', 1),
   update => update
  .style('color', 'green')
  .style('opacity', 1),
    exit => exit
  .style('color', 'red')
  )
  .attr('class', 'cell');

Данные

 data1 = [
  {name: "Chocolate",rating:10},
  {name:"Jam",rating:9},
  {name:"Sprinkles",rating:8},
  {name:"Honey",rating:5}
];

data2 = [
  {name: "Jam",rating:20},
  {name:"Chocolate",rating:9},
  {name:"Sprinkles",rating:8},
  {name:"Honey",rating:7}
];

Функция данных

 function dataInput(input){
  if(input == "DataSet 2"){
    return data1
  } else{
    return data2
  };
};

Комментарии:

1. Можете ли вы подтвердить, что текущий запущенный фрагмент соответствует вашей ситуации ObservableHQ?

2. @Ruben Helsloot Да, это последняя версия

3. Откат, поскольку поведение не присутствовало во фрагменте

4. @Ruben Helsloot Урезанный вариант сработал для вас? Цвет меняется на зеленый для обновленных значений? Он не работает с ObservableHQ

5. Да, так оно и было, возможно, из-за модуля select, который я не смог использовать нигде за пределами ObservableHQ. Вы можете получить доступ к предыдущим версиям кода, нажав на «отредактировано x часов назад»

Ответ №1: