如何解决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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。