D3.js 一直遇到这个错误 TypeError: Cannot read properties of null (reading 'ownerDocument')?

Posted 2023-02-22

【中文标题】D3.js 一直遇到这个错误 TypeError: Cannot read properties of null (reading \'ownerDocument\')?

【英文标题】：D3.js keep running into this error TypeError: Cannot read properties of null (reading 'ownerDocument')?D3.js 一直遇到这个错误 TypeError: Cannot read properties of null (reading 'ownerDocument')?

【发布时间】：2022-01-17 11:09:53

【问题描述】：

当我尝试为我的 d3 图表创建图例时，我一直遇到此错误

TypeError：无法读取 null 的属性（读取“ownerDocument”） 在新的 EnterNode (enter.js:9)

8 export function EnterNode(parent, datum) 

9 this.ownerDocument = parent.ownerDocument;

这只是偶尔发生一次，并不总是， 我的 d3 配置；

 private data: SimpleDataModel[] = [
     name: `Value 1`, value: '25', color: '#254C66' ,
     name: `Value 2`, value: '75', color: '#49A0CC' ,
  ];
this.createSvg();
this.createLegend();
private createSvg(): void 
    this.d3
      .select(this.figureElement.nativeElement)
      .append('svg')
      .attr('viewBox', `0 0 $this.width $this.height`);

    this.svg = this.d3
    .select(this.figureElement.nativeElement)
    .select('svg');

    this.legend = this.svg
      .append('g')
      .attr('id','legend');

    this.graphGroup = this.svg
      .append('g')
      .attr(
        'transform',
        'translate(' + this.width / 2 + ',' + this.height / 2 + ')'
      );
  

  private createLegend(): void 

     const legend1 = this.svg.select('g#legend')
      .data(this.data)   =====>ERROR OCCURS AT THIS LINE
      .enter();

    legend1.append('rect')
      .attr('fill', d => this.colors(d.name))
      .attr('height', 15)
      .attr('width', 15);

    legend1.append('text')
      .attr('x', 18)
      .attr('y', 10)
      .attr('dy', '.15em')
      .text((d, i) => d.name)
      .style('text-anchor', 'start')
      .style('font-size', 24);
    

有时，如果我以不同的方式配置数据输入，它会起作用，但有时它不起作用。我做错了什么？

【参考方案1】：

我想通了，这个错误是因为另一个 g 元素被渲染而没有 id 图例。通过使用修复它

const legend1 = this.svg.selectAll('g')
      .select('#legend')
      .data(this.data)
      .enter();