D3数据join调用输入而不是更新

问题描述

我想根据输入选择的数据来更新名称和等级的单元格值。每当输入更改时，都会输入新值，但不会触发更新和退出功能（值不会变为绿色或红色）。知道我在做什么错吗？可以在此处找到该代码的实时版本：

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',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','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:7}
];

数据功能

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

解决方法

该问题特定于ObservableHQ。问题在于，只要数据输入发生更改，就会触发整个代码，并重新附加主div

const div = d3.create('div')
.style('display','flex');

解决方案是将其与其余代码分开，并将其放在自己的块中。查看在ObservableHQ论坛上发布的答案：

https://talk.observablehq.com/t/data-join-calls-enter-instead-of-update/4109/3