D3将.data（）设置为附加元素时抛出“无法读取null的属性'ownerDocument'”

Question

我收到此错误：

未捕获的TypeError：无法读取null的属性“ ownerDocument”

这是从设置.data()为最近附加了元素的行开始的d3：

const someSet = someSelection.filter('.some:(filter)')

someSet.each((d, i, nodes) => {
  const someElement = d3.select(nodes[i])
  const someChild = someElement.append('g')

  someChild.data(this.data) // <-- This line throws the error
   .enter()
   .append('circle')
   .classed('some-class', true)
})

环顾四周，我发现所有消息都表明当有问题的元素尚未添加到页面时，他们有此错误，但是我确认在引发此错误时，我的元素已添加到页面。

Answer 1

原来我忘了在将.data（）添加到嵌套元素之前忘记添加新的空选择：

const someSet = someSelection.filter('.some:(filter)')

someSet.each((d, i, nodes) => {
  const someElement = d3.select(nodes[i])
  const someChild = someElement.append('g')

  someChild.selectAll('circle.some-class') // added empty selection here
   .data(this.data)
   .enter()
   .append('circle')
   .classed('some-class', true)
})

如果我做类似创建组，存储对组的引用，附加数据并附加，然后尝试将新数据附加到对组<g>的引用（），而不是选择内容的话，也会遇到此错误。该组）。例如，这将导致此错误：

const someObj = {} // or some class etc
const someSet = someSelection.filter('.some:(filter)')

someSet.each((d, i, nodes) => {
  const someElement = d3.select(nodes[i])
  const someChild = someElement.append('g')
  someObj.someChild = someChild

  someChild.selectAll('circle.some-class') // added empty selection here
   .data(this.data)
   .enter()
   .append('circle')
   .classed('some-class', true)
})

// ...do stuff
someObj.someChild.data(newData)
// Error because someObj.someChild is a D3 element, not a D3 selection

因此，最后应该是：

someObj.someChild.selectAll('circle.some-class').data(newData)

...或存储的引用应该是添加数据的选择。