Example of D3 USA Map done in angular2

Question

I want to implement this D3 map of the united states using typescript in angular2 http://bl.ocks.org/NPashaP/a74faf20b492ad377312 Anyone know some good examples that can help me out? I couldn't find any good assistance for this anywhere. Thanks.

Answer 1

You can create a component for this and leverage the ViewChild decorator to reference the elements of the template (svg and tooltip) and configure them within the ngAfterViewInit hook method.

Here is a sample of use:

@Component({
  selector: 'us-map',
  template: `
    <div #tooltip></div>
    <svg #statesvg width="960" height="600"></svg>
  `
})
export class UsMapSvg {
  @ViewChild('tooltip')
  tooltipElt:ElementRef;
  @ViewChild('statesvg')
  statesvgElt:ElementRef;

  ngAfterViewInit() {
  function mouseOver(d){
        d3.select("#tooltip").transition().duration(200).style("opacity", .9);      

        d3.select("#tooltip").html(toolTip(d.n, data[d.id]))  
            .style("left", (d3.event.pageX) + "px")     
            .style("top", (d3.event.pageY - 28) + "px");
    }

    function mouseOut(){
        d3.select("#tooltip")
          .transition()
          .duration(500).style("opacity", 0);      
    }

    let uStatePaths = (...)
    d3.select(this.statesvg.nativeElement).selectAll(".state")
        .data(uStatePaths).enter()
        .append("path")
        .attr("class","state")
        .attr("d",function(d){ return d.d;})
        .style("fill",function(d){ return data[d.id].color; })
        .on("mouseover", () => {
          d3.select(this.tooltip.nativeElement)
            .transition()
            .duration(200)
            .style("opacity", .9);      
          (...)
        })
        .on("mouseout", () => {
          (...)
        });
  }
}