0

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

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
  };
};
4

1 回答 1

1

这个问题是 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

于 2020-11-06T10:36:35.487 回答