Javascript 选择不更新数据

我正在尝试用D3.js更新数据数组，但它不起作用

我已经阅读了D3的文档，以及bl.ocks.org上的许多演示，但我的问题仍然存在。我不明白为什么。我错过了一些东西，但我找不到这是什么

这是我的代码：

const data = [4, 8, 15, 16, 23, 42]
const data2 = [3, 6, 9, 17, 45]

const button = `<button>Click</button>`
document.querySelector('body').insertAdjacentHTML('afterbegin', button)

const svg = d3.select('body')
.append('svg')

const renderArray = (data) => {
    const group = svg.selectAll('g')
    .data(d => data)

    group.exit().remove()

    group.enter()
        .append('g')
        .merge(group)
        .attr('id', d => d)

    const p = group.selectAll("text")
    .data(d => d)

    p.enter()
        .append("text")
        .merge(p)
        .text((d) => d)

    p.exit().remove()
}

renderArray(data)

document.querySelector('button').addEventListener('click', () => renderArray(data2))

const data=[4,8,15,16,23,42]
常量数据2=[3,6,9,17,45]
常量按钮=`Click`
document.querySelector（'body'）。insertAdjacentHTML（'afterbegin'，按钮）
const svg=d3.select（'body'）
.append（'svg'）
const renderArray=（数据）=>{
const group=svg.selectAll（'g'）
.data（d=>data）
group.exit（）.remove（）
group.enter（）
.append（'g'）
.合并（组）
.attr（'id'，d=>d）
const p=group.selectAll（“文本”）
.数据（d=>d）
p、 输入（）
.append（“文本”）
.合并（p）
.text（（d）=>d）
p、 exit（）.remove（）
}
渲染光线（数据）
document.querySelector（'button'）。addEventListener（'click'，（）=>renderArray（数据2））

我的笔：

---

我期待数据数组的更新。

您有两个主要问题：

首先，选择是不可变的。因此，此处的

merge

函数

group.enter()
    .append('g')
    .merge(group)
    //etc...

。。。不会更改

组

。您必须重新分配它：

group = group.enter()
    //etc...

其次，

data

函数只接受三件事：数组、函数或无。话虽如此，就案文而言，应当是：

const p = group.selectAll("text")
    .data(d => [d])
    //array-----^

更好的是，因为这些值不是内部数组或对象，所以只需删除那些

文本

选择并直接附加文本即可

还有其他一些小问题，但这两个是最重要的问题

以下是生成的代码：

const data=[4,8,15,16,23,42]
常量数据2=[3,6,9,17,45]
常量按钮=`Click`
document.querySelector（'body'）。insertAdjacentHTML（'afterbegin'，按钮）
const svg=d3.select（'body'）
.append（'svg'）
const renderArray=（数据）=>{
让group=svg.selectAll（'g'）
.数据（数据）
group.exit（）.remove（）
group=group.enter（）
.append（'g'）
.合并（组）
.attr（“transform”（转换），（（i，i）=>“translate（10），+（i*20+）”）
.attr（'id'，d=>d）
const p=group.selectAll（“文本”）
.数据（d=>[d]）
p、 输入（）
.append（“文本”）
.合并（p）
.text（（d）=>d）
p、 exit（）.remove（）
}
渲染光线（数据）
document.querySelector（'button'）。addEventListener（'click'，（）=>renderArray（data2））