如何将angular2组件附加到d3选择？

Question

我使用Angular2 + d3js绘制图表。将鼠标移动到图表上时有一个工具提示。目前我正在追加一个＆＃34; div＆＃34;到＆＃34;身体＆＃34;直接并在d3.select("svg").on("mouseover", function(d){...}).

中移动鼠标时动态生成innerHTML

    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中使用它，我认为应该将工具提示移动到另一个Component / Directive中以分离逻辑。组件可能如下所示：

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的鼠标悬停功能（＆＃34; svg＆＃34;）？或者如何使用＆＃39; app-tooltip＆＃39;选择器直接在另一个组件？ 谢谢!!

Answer 1

  

或者如何在另一个组件中使用'app-tooltip'选择器   直接？

您只需像往常一样将component的选择器添加到其他component。 <app-tooltip></app-tooltip>。不要忘记将其添加到declarations的{​​{1}}中（或其他app.module.ts仍然可以使用它的级别）。

实施例

<强> component1.component.ts

component

<强> component1.component.html

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

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

export class Component1Component implements OnInit {
    constructor() { }

    ngOnInit() { }
}

<强> component2.component.ts

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

<强> component2.component.html

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

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

export class Component2Component implements OnInit {
    constructor() { }

    ngOnInit() { }
}

<强> app.module.ts

<h3>This is component 2</h3>

<强> app.component.html

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

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

<强>结果