Трехмерная гистограмма в приложении angular 8 с использованием d3. js или в виде графика или трех. js

Question

Я пытаюсь создать трехмерную гистограмму в приложении angular 8. Я попытался проверить документацию для d3. js, three. js и диаграмм для построения графиков, но ни для одного из них нет примера. Может кто-нибудь выложить пример кода для моей справки? Если не эти рамки, любые другие структуры также будут работать. Но мне нужен код только на языке javascript / typcript.

Спасибо!

Answer 1

Таким образом вы можете интегрировать диаграммы d3 в Angular 8

установить npm пакет

npm install angular-d3-charts

Добавить следующий скрипт в ваш index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

Добавьте эти стили к style.scss

.tick text {
    font-size: 12px;
}

.axis path,
.axis line {
    fill: none;
    stroke: #4C5554;
    stroke-width: 1;
}

.x.axis .tick line {
    display: none
}

.domain {
    display: block !important;
    stroke: #4C5554 !important;
    stroke-width: 2 !important;
}
.legend {
    font-size: 12px;
    font-family: sans-serif;
    rect {
        stroke-width: 2;
    }
}

Добавьте любой компонент d3 диаграмм, который вы хотите использовать в app.module.ts
К диаграмме ddd добавьте BarChartComponent in declarations как это:

import { BarChartComponent } from 'angular-d3-charts'; // this is needed!

@NgModule({
   declarations: [  
   BarChartComponent,
   //...OtherModules 
   ] // along with your other modules
})
export class AppModule {}

Используйте компонент в вашем пакете:

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  public colors = ["red", "green", "blue"];
  public dataColumns = [1]; // Single Bar Chart
  public barChartData = [
    {
      id: 0,
      label: "label1",
      value1: 10,
      value2: 10,
      value3: 10
    },
    {
      id: 1,
      label: "label2",
      value1: 10,
      value2: 10,
      value3: 10
    }
  ];
}

app.component.html

<angular-d3-bar [id]="test2" [data]="barChartData" [dataColumns]="dataColumns" [colors]="colors" [yAxisTicks]=10 [width]=400
    [height]=200 [transitionDuration]=1000 [transitionDelay]=30 [barWidth]="'16px'"></angular-d3-bar>

Более подробную информацию можно найти здесь: https://www.npmjs.com/package/angular-d3-charts#bar - диаграмма

PS: Вам может потребоваться установить JQuery и d3.