Angular D3 не отображает линейный график

Question

Привет. Я пытаюсь создать линейную диаграмму отсюда https://bl.ocks.org/d3noob/3c040800ff6457717cca586ae9547dbf, изменил данные в формате json и применил код в своем проекте angular. Но d3 ничего не отображает, и на консоли chrome нет ошибок. Я новичок в d3 и не могу понять ошибку. Может кто-нибудь помочь мне с этим?

Вот мой angular 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));
  }

}

и данные. 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
  }
]
'''

Answer 1

Я следовал тому же учебнику, и у меня была та же проблема.

Что я сделал, так это то, что попробовал другой учебник. Вот ссылка . Сначала ничего не отображалось, но на этот раз речь шла о жизненном цикле angular. В этом примере я изменил OnChanges на AfterViewInit и вуаля.

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>

S CSS

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>