Angular 2 中的 D3 派？

Question

如何在Angular2中创建d3饼图如果我想计算EMI。我已经创建了用于 EMI 计算的应用程序。现在我想展示一个关于计算的 PIE 图

这是emi.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms'
import * as D3 from 'd3';


@Component({
    selector: 'emi-app',
    templateUrl: 'app/emi/emi.component.html',
    styleUrls:['app/emi/emi.component.css']
})
export class EmiComponent  { 
    loanamount:number
    interestrate:number
    loantenure:number
    emi:number
    newemi:number


    emiForm = new FormGroup({
        loanamount: new FormControl(null, [Validators.required]),
        interestrate: new FormControl(null, [Validators.required]),
        loantenure: new FormControl(null, [Validators.required]),

    });

    calculateEmi() {

        if(this.loanamount && this.interestrate && this.loantenure) {
            let interestPerMonth = this.interestrate/12/100;
            let numerator = Math.pow((1+interestPerMonth), this.loantenure);
            let denominator = numerator - 1;
            this.emi = ((this.loanamount * interestPerMonth) * 
            numerator/denominator);
            var newemi = this.emi.toFixed(2) ;
            console.log(newemi);
          }
        var pie = new d3pie()


    }
}

这是emi.component.html

    <div class="container">
    <h1> EMI Calculator</h1>

  <form [formGroup]="emiForm" name="calc">
    <div class="row">
      <div class="col-md-4">
        <div class="form-group currency">
                <!--<label>Loan Amount:</label><i>&#x20b9;</i>
                <input type= "number" class = "form-control" formControlName = 
    "loanamount" [(ngModel)]="loanamount">  
        </div>

        <div class="form-group ">
            <label>Intrest Rate:</label>
            <i>%</i><input type="number" class="form-control" formControlName="interestrate"  [(ngModel)]="interestrate">
        </div>

        <div class="form-group ">
            <label>Loan Tenure:</label>
            <input type="number" class="form-control" formControlName="loantenure"  [(ngModel)]="loantenure">
        </div>
        <button (click)="calculateEmi()" class="btn btn-primary">Submit</button>
     </div>
     <div class="col-md-8">
        <div id="pieChart"></div>
     </div>
     </div>
    </form>

    <hr/>
        <div class="row" *ngIf="emi">
            <div class= "col-md-4"> 
                <h5>EMI</h5>
            </div>
            <div class= "col-md-4"> 
                   <h5>Total Payable Interest</h5>      
            </div>
            <div class= "col-md-4"> 
                    <h5>Total Payment(Principal amount + Interest)</h5>     
            </div>
        </div>
        <div class="row" *ngIf="emi">
            <div class= "col-md-4">
                <h5><i>&#x20b9;</i>{{emi.toFixed(2)}} / Month</h5>
            </div>
            <div class= "col-md-4">
                <h5><i>&#x20b9;</i>{{(emi*loantenure-loanamount).toFixed(2)}}</h5>
            </div>
            <div class= "col-md-4">
                <h5><i>&#x20b9;</i>{{(emi*loantenure).toFixed(2)}}</h5>
            </div>  
        </div>

    </div>

现在我是 Angular 2 和 d3 的新手所以如果有人愿意帮助我我会很高兴

Answer 1

你应该使用Angular的生命周期钩子，以便OnInit，你可以调用calculateEmi()。在那一刻，您设置了所有需要的值。然后你构建你的 D3 饼图实现 AfterContentInit.

勾选https://angular.io/guide/lifecycle-hooks 和 http://www.palador.com/2017/02/28/create-a-pie-chart-with-dynamic-data-using-d3-js-angular-2/

Angular 2 中的 D3 派？

D3 Pie in Angular 2?

d3.js

d3pie.js

angular