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

时间:2018-04-06 15:46:10

标签: d3.js

我收到了这个错误:

  

未捕获的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)
})

环顾我所能找到的是a source saying they had this error when the element in question hadn't yet been added to the page,但我已经确认在抛出此错误时我的元素已添加到页面中。

1 个答案:

答案 0 :(得分:5)

事实证明,在将.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)
})

如果我执行类似创建组,存储对组的引用,附加数据和追加,然后尝试将新数据附加到对组的引用({{1 }})而不是组内容的选择。例如,这将导致此错误:

<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

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