當我嘗試為我的 d3 圖創建圖例時，我一直遇到這個錯誤
型別錯誤：無法在新的 EnterNode (enter.js:9) 處讀取 null 的屬性（讀取“ownerDocument”）
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);
}
有時，如果我以不同的方式配置我的資料輸入，它會起作用，但有時它會不起作用。我究竟做錯了什么？
uj5u.com熱心網友回復：
我想通了，錯誤是因為另一個 g 元素被渲染而沒有 id 圖例。通過使用修復它
const legend1 = this.svg.selectAll('g')
.select('#legend')
.data(this.data)
.enter();
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/394801.html
標籤：javascript 有角的 d3.js
上一篇：將狀態資料傳遞給ipc函式呼叫