[英]Angular D3 not displaying line chart
嗨,我正在嘗試從這里創建折線圖https://bl.ocks.org/d3noob/3c040800ff6457717cca586ae9547dbf並更改了 json 格式的數據並在我的 angular 項目中應用了代碼。 但是 d3 既沒有顯示任何內容,也沒有在 chrome 控制台上出現任何錯誤。 我是 d3 的新手,無法找出錯誤。 有人可以幫我弄這個嗎?
這是我的角度 ts 文件。
import * as D3 from 'd3';
import * as data from './data.json';
@Component({
selector: 'app-linechart',
templateUrl: './linechart.component.html',
styleUrls: ['./linechart.component.scss']
})
export class LinechartComponent implements OnInit {
constructor() { }
ngOnInit(): void {
this.createLineChart();
}
public createLineChart(): void {
console.log('in line method');
console.log(D3);
console.log(data);
console.log(data[0]);
const d3: any = D3;
// tslint:disable-next-line:one-variable-per-declaration
const margin = {top: 20, right: 20, bottom: 70, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// parse the date / time
const parseTime = d3.timeParse('%d-%b-%y');
// set the ranges
const x = d3.scaleTime().range([0, width]);
const y = d3.scaleLinear().range([height, 0]);
// define the line
const valueLine = d3.line()
.x(d => d.date)
.y(d => d.close);
// append the svg object to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
const svg = d3.select('body').append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform',
'translate(' + margin.left + ',' + margin.top + ')');
// Scale the range of the data
x.domain(d3.extent(data, d => d.date));
y.domain([0, d3.max(data, d => d.close)]);
// Add the valueline path.
svg.append('path')
.data([data])
.attr('class', 'line')
.attr('d', valueLine);
// Add the X Axis
svg.append('g')
.attr('class', 'axis')
.attr('transform', 'translate(0,' + height + ')')
.call(d3.axisBottom(x).ticks(10))
.selectAll('text')
.style('text-anchor', 'end')
.attr('dx', '-.8em')
.attr('dy', '.15em')
.attr('transform', 'rotate(-65)');
// Add the Y Axis
svg.append('g')
.attr('class', 'axis')
.call(d3.axisLeft(y));
}
}
和 data.json
{
"date": "1-May-12",
"close": 58.13
},
{
"date": "30-Apr-12",
"close": 53.98
},
{
"date": "27-Apr-12",
"close": 67
},
{
"date": "26-Apr-12",
"close": 89.7
},
{
"date": "25-Apr-12",
"close": 99
},
{
"date": "24-Apr-12",
"close": 130.28
},
{
"date": "23-Apr-12",
"close": 166.7
},
{
"date": "20-Apr-12",
"close": 234.98
},
{
"date": "19-Apr-12",
"close": 345.44
},
{
"date": "18-Apr-12",
"close": 443.34
},
{
"date": "17-Apr-12",
"close": 543.7
},
{
"date": "16-Apr-12",
"close": 580.13
},
{
"date": "13-Apr-12",
"close": 605.23
},
{
"date": "12-Apr-12",
"close": 622.77
},
{
"date": "11-Apr-12",
"close": 626.2
},
{
"date": "10-Apr-12",
"close": 628.44
},
{
"date": "9-Apr-12",
"close": 636.23
},
{
"date": "5-Apr-12",
"close": 633.68
},
{
"date": "4-Apr-12",
"close": 624.31
},
{
"date": "3-Apr-12",
"close": 629.32
},
{
"date": "2-Apr-12",
"close": 618.63
},
{
"date": "30-Mar-12",
"close": 599.55
},
{
"date": "29-Mar-12",
"close": 609.86
},
{
"date": "28-Mar-12",
"close": 617.62
},
{
"date": "27-Mar-12",
"close": 614.48
},
{
"date": "26-Mar-12",
"close": 606.98
}
]
'''
我遵循了相同的教程,但遇到了同樣的問題。
我所做的是我嘗試了另一個教程。 這是鏈接。 起初什么也沒顯示,但這次是關於 angular 生命周期。 在那個例子中,我通過 AfterViewInit 更改了 OnChanges,瞧。
TS
import {Component, OnChanges, OnInit, ViewEncapsulation, SimpleChanges, AfterViewInit, ElementRef, ViewChild} from '@angular/core';
import * as d3 from 'd3';
import {STOCKS} from './stocks';
@Component({
selector: 'app-sgo-example-feature',
encapsulation: ViewEncapsulation.None,
templateUrl: './example.feature.component.html',
styleUrls: ['./example.feature.component.scss']
})
export class ExampleFeatureComponent implements OnChanges, AfterViewInit {
@ViewChild('chart')
private chartContainer: ElementRef;
data = STOCKS;
margin = {top: 20, right: 20, bottom: 30, left: 40};
constructor() { }
ngOnChanges(): void {
console.log(this.data);
if (!this.data) { return; }
this.createChart();
console.log('I made it here');
}
ngAfterViewInit(): void {
console.log(this.data);
if (!this.data) { return; }
this.createChart();
console.log('I made it here');
}
private createChart(): void {
d3.select('svg').remove();
const element = this.chartContainer.nativeElement;
const data = this.data;
const svg = d3.select(element).append('svg')
.attr('width', element.offsetWidth)
.attr('height', element.offsetHeight);
const contentWidth = element.offsetWidth - this.margin.left - this.margin.right;
const contentHeight = element.offsetHeight - this.margin.top - this.margin.bottom;
const x = d3
.scaleBand()
.rangeRound([0, contentWidth])
.padding(0.1)
.domain(data.map(d => d.letter));
const y = d3
.scaleLinear()
.rangeRound([contentHeight, 0])
.domain([0, d3.max(data, d => d.value)]);
const g = svg.append('g')
.attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');
g.append('g')
.attr('class', 'axis axis--x')
.attr('transform', 'translate(0,' + contentHeight + ')')
.call(d3.axisBottom(x));
g.append('g')
.attr('class', 'axis axis--y')
.call(d3.axisLeft(y).ticks(10, '%'))
.append('text')
.attr('transform', 'rotate(-90)')
.attr('y', 6)
.attr('dy', '0.71em')
.attr('text-anchor', 'end')
.text('Frequency');
g.selectAll('.bar')
.data(data)
.enter().append('rect')
.attr('class', 'bar')
.attr('x', d => x(d.letter))
.attr('y', d => y(d.value))
.attr('width', x.bandwidth())
.attr('height', d => contentHeight - y(d.value));
}
}
html
<div #chart id="chart"></div>
SCSS
app-sgo-example-feature {
#chart {
height: inherit;
width: inherit;
.bar {
fill: steelblue;
}
.bar:hover {
fill: brown;
}
.axis--x path {
display: none;
}
}
}
以及內容頁面中的調用
<app-sgo-example-feature ></app-sgo-example-feature>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.