CODEWITHSUNDEEP
d3.jstypescriptangular
Hongbo Miao
Hongbo Miao

Reputation: 50016

How to correctly reuse D3.js component in Angular 2?

I want to reuse this D3.js component in Angular 2.

@Component({
  selector: 'child-cmp',
  template: `
    <div>
      <svg class="chart"></svg>
    </div>
  `
})
export class ChildCmp {
  ngOnInit() {
    let chart = d3.select(".chart")
      .append("g")
      .append("rect")
        .attr("width", 50)
        .attr("height", 100);
  }
}

http://plnkr.co/edit/PnJfFJ7sOZIxehs2LHNh?p=preview

However, you can see in this demo, two rectangles cannot show together well.

How can I correctly reuse these D3.js component? Thanks

Upvotes: 0

Views: 1182

Answers (1)

Thierry Templier
Thierry Templier

Reputation: 202346

I would try something like that:

@Component({
  selector: 'child-cmp',
  template: `
    <div>
      <svg class="chart"></svg>
    </div>
  `
})
export class ChildCmp {
  constructor(private eltRef:ElementRef) {}

  ngAfterViewInit() {
    let chart = d3.select(this.eltRef.nativeElement)
      .select('.chart')
      .append("g")
      .append("rect")
        .attr("width", 50)
        .attr("height", 100);
  }
}

See this plunkr: http://plnkr.co/edit/lqFGoEvnvGw4PvCs8OWg?p=preview.

Upvotes: 5

Related Questions