這是我的代碼！我正在使用 angular 和 d3 庫制作一個簡單的形狀，但螢屏上沒有顯示任何內容。
餅圖 TS 檔案：
@Component({
selector: 'pie-chart',
templateUrl: './pie-chart.component.html',
styleUrls: ['./pie-chart.component.css'],
})
export class PieChartComponent {
svg = d3
.select('#canvasarea')
.append('svg')
.attr('width', 400)
.attr('height', 100);
circle = this.svg
.append('circle')
.attr('cx', 200)
.attr('cy', 200)
.attr('r', 50)
.attr('fill', 'blue');
}
餅圖 HTML 檔案：
<div id="canvasarea"></div>
應用組件.html：
<pie-chart></pie-chart>
uj5u.com熱心網友回復：
如上所述，您確實需要添加具有 r 屬性的半徑。而且您還需要在您的角度組件中呈現視圖以添加 svg 并對其進行操作
import { AfterViewInit, Component } from '@angular/core';
import * as d3 from 'd3';
@Component({
selector: 'pie-chart',
templateUrl: './pie-chart.component.html',
styleUrls: ['./pie-chart.component.css'],
})
export class PieChartComponent implements AfterViewInit {
public svg: any = null;
constructor() { }
ngAfterViewInit(): void {
this.svg = d3
.select('#canvasarea')
.append('svg')
.attr('width', 400)
.attr('height', 100);
this.svg
.append('circle')
.attr('cx', 50)
.attr('cy', 50)
.attr('r', 20)
.style('fill', 'blue');
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/447357.html
標籤：javascript 有角度的 打字稿 svg d3.js
上一篇：打字稿中的嵌套函式會出錯
下一篇：D3.jsrect在圖表上不顯示