时间戳

首页 > 解决方案 > 选择不更新数据

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))

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

我期待数据数组的更新。

标签： javascriptd3.js

解决方案

你有两个主要问题：

首先，选择是不可变的。因此，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>

推荐阅读