在angular2中完成的D3 USA Map示例

Question

我想用angular2中的typescript來實現這個美國的D3地圖http://bl.ocks.org/NPashaP/a74faf20b492ad377312任何人都知道一些可以幫助我的好例子嗎？ 我無論如何都找不到任何好的幫助。 謝謝。

Answer 1

您可以為此創建一個組件，並利用ViewChild修飾器引用模板的元素（svg和tooltip），並在ngAfterViewInit鈎子方法中配置它們。

以下是使用示例：

@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", () => {
          (...)
        });
  }
}