如何將angular2組件添加到d3選擇？

Question

我正在使用Angular2 + d3js繪製圖表。將鼠標移動到圖表上時有一個工具提示。目前，我追加一個「格」爲「體」直接在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"); 
    }); 

移動鼠標的時候，因爲我在Angular2使用這個動態生成的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>。不要忘記將它添加到的app.module.ts（或其他component仍然可以使用它的級別）。

例

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> 

結果