D3選択にangular2コンポーネントを追加するにはどうすればいいですか？

Question

私はAngular2 + d3jsを使ってグラフを描いています。マウスをチャート上に移動すると、ツールチップが表示されます。現在、私は直接「ボディ」と「DIV」を追加していると私はAngular2でこれを使用していますので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"); 
    }); 

にマウスを移動するとき、私は/ツールチップが別のコンポーネントに移動されるべきだと思う動的innerHTMLプロパティを生成しますロジックを分離する命令。コンポーネントは次のようになります。

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() { 
    } 

} 

しかしd3.selectのマウスオーバー機能（「SVG」）に作成されたコンポーネントを追加する方法？または、他のコンポーネントの 'app-tooltip'セレクタを直接使う方法は？ ありがとうございます！

Answer 1

または別のコンポーネントの 'app-tooltip'セレクタの使用方法 ？通常どおりにあなただけの、他のcomponentにcomponentのセレクタを追加

。 <app-tooltip></app-tooltip>。 declarationsをapp.module.ts（またはそれがまだ利用できるレベルにある）に追加することを忘れないでください。

例

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> 

結果