Ngx-topicmapper NPM

ngx-topicmapper

This is a component to integrate D3 based MC-Topicmapper plugin into your Angular app.

Installation

npm install d3@7.8.5  ngx-topicmapper --save 
npm install @types/d3@7.4.2 --save-dev (For d3 types: based on D3 version)

Configuration

Ensure you import the module and the dependencies:

import { NgxTopicmapperModule } from 'ngx-topicmapper';

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

In your component:

Add to the html:

<lib-ngx-topicmapper id="mcGalaxychart" height="800" [treeData]="data" [loader]="boolPreloader" 
(exportClicked)="onExportClicked($event)" (legendClicked)="onlegendClicked($event)" (nodeClicked)="onNodeClicked($event)" ></lib-ngx-topicmapper>

Add to the typescript:

export class MyComponent {
  data: any = {};
  boolPreloader: boolean = false;

  ...
  constructor() {
  }

 onExportClicked() {
   console.log("Export clicked")
 }

 onlegendClicked() {
   console.log("Legend clicked")
 }

 nodeClicked(data) {
   console.log("noded clicked", data)
 }

Attributes

It can contain the following properties.

Input

Option	Default	Type	Description
id	mcTopicMapperChart	String	(OPIONAL) Unique Id of the chart.
height	700	Number	(OPIONAL) Height of the SVG (default 700px), lower heights may have overlapping issue. Width is dynamic based on parent container.
treeData	Not set	Object	As specified
loader	False	Boolean	Loader Animation when data is loading via API

Output

Option	Description
nodeClicked	When nodes in graph are clicked, output event will be triggered with clicked node details.
exportClicked	When export button on Chart is clicked
legendClicked	When legend button on Chart is clicked