Question

我想使用angular2 http://bl.ocks.org/NPashaP/a74faf20b492ad377312中的打字稿来实现美国的D3地图有人知道一些可以帮助我的好例子吗？我无论如何都找不到任何好的帮助。谢谢。

Answer 1

您可以为此创建一个组件，并利用ViewChild装饰器来引用模板的元素（svg和工具提示），并在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", () => {
          (...)
        });
  }
}

在angular2中完成的D3 USA Map示例

1 个答案: