How to append angular2 component to d3 selection?

Question

I am using Angular2 + d3js to draw a chart. There is a tooltip when moving mouse onto the chart. Currently I am appending a "div" to "body" directly and generate the innerHTML dynamically when moving mouse in the d3.select("svg").on("mouseover", function(d){...}).

    var div = d3.select("body").append("div")   
      .attr("class", "tooltip")             
      .style("opacity", 10);

    d3.select("svg").on("mouseover", function(d) {
        div.transition()
          .duration(200)
          .style("opacity", .9);

        div.html("Tooltip Content Here")
          .style("left", (d3.event.pageX) + 10 + "px")
          .style("top", (d3.event.pageY - 28) + "px");
   });

Because I am using this in Angular2, I think the tooltip should be moved into another Component / Directive to separate the logic. A component may look like:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-tooltip',
  templateUrl: './tooltip.component.html',
  styleUrls: ['./tooltip.component.css']
})
export class TooltipComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

But how to append the created component to the mouseover function of d3.select("svg")? Or how to use the 'app-tooltip' selector in another component directly? Thank you!!

Answer 1

Or how to use the 'app-tooltip' selector in another component directly?

You just add the component 's selector to the other component , as you normally would. <app-tooltip></app-tooltip> . Don't forget to add it in declarations of app.module.ts (or at a level where the other component still can make use of it).

Example

component1.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-component1',
    templateUrl: 'component1.component.html'
})

export class Component1Component implements OnInit {
    constructor() { }

    ngOnInit() { }
}

component1.component.html

<h1>This is component 1</h1>
<app-component2></app-component2>

component2.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-component2',
    templateUrl: 'component2.component.html'
})

export class Component2Component implements OnInit {
    constructor() { }

    ngOnInit() { }
}

component2.component.html

<h3>This is component 2</h3>

app.module.ts

...
import { AppComponent } from './app.component';
import { Component1Component, Component2Component } from './components/index';

@NgModule({
  declarations: [
    ...
    AppComponent,
    Component1Component, Component2Component
  ],
  imports: [
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<app-component1></app-component1>

Result