如何将Angular2组件附加到D3选择器？

Question

如何将Angular2组件附加到D3选择器？

3

我正在使用Angular2 + d3js绘制图表。当鼠标移动到图表上时，会出现一个工具提示。目前，我直接将“div”附加到“body”上，并在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，所以我认为提示应该移动到另一个组件/指令中以分离逻辑。一个组件可能看起来像：

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")的mouseover函数中呢？或者如何直接在另一个组件中使用'app-tooltip'选择器？谢谢！

- Ngu Developer

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Arg0n · Answer 1

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

你只需要像往常一样将 'component' 的选择器添加到另一个 'component' 中即可。<app-tooltip></app-tooltip>。不要忘记在 app.module.ts 的declarations中添加它(或在其他 '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>

结果