javascript - 选择不更新数据

Question

我正在尝试使用 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))

我的笔:https://codepen.io/Tirkal/pen/OKOvzN?editors=0010

我期待数据数组的更新。

Answer 1

你有两个主要问题:

首先，选择是不可变的。因此，这里的merge函数...

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

... 不会更改 group。你必须重新分配它:

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

其次，data 函数只接受三种东西:数组、函数或什么都不接受。话虽如此，对于文本，它应该是:

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

更好的是，因为这些值不是内部数组或对象，只需删除那些 text 选择并直接附加文本。

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

这是结果代码:

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) => {
  let group = svg.selectAll('g')
    .data(data)

  group.exit().remove()

  group = group.enter()
    .append('g')
    .merge(group)
    .attr("transform", (_, i) => "translate(10," + (i * 20) + ")")
    .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))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>