时间戳

首页 > 解决方案 > 角度的D3 js树

angular - 角度的D3 js树

问题描述

我想在我的角度应用程序中添加 d3 js 树并使用某些数据添加到应用程序组件。我对如何使用我的角度应用程序进行配置感到困惑。请帮助我如何做到这一点

标签： angulard3.js

解决方案

步骤-1：npm install d3 angular-d3-tree --save

步骤-2：在您的 app.module.ts 文件中

import { AngularD3TreeLibModule } from 'angular-d3-tree';

@NgModule({
   imports: [
       AngularD3TreeLibModule,
       // Other Modules
   ]
})
export class AppModule {}

步骤-3：在 app.component.html 中

<s2w-angular-d3-tree-lib
  [(treeData)]="data"
  (onNodeChanged)="nodeUpdated($event)"
  (onNodeSelected)="nodeSelected($event)"></s2w-angular-d3-tree-lib>

步骤-4：在 app.component.ts

import { AngularD3TreeLibService } from 'angular-d3-tree';

export class MyComponent {
  data: any[];

  constructor(private treeService: AngularD3TreeLibService) {
    this.data= YOUR_DATA;
  }
  nodeUpdated(node:any){
    console.info("app detected node change");
  }
  nodeSelected(node:any){
    console.info("app detected node selected", node);
  }
}

推荐阅读