Dictionary 在angular2完成的D3美国地图示例

我想用angular2中的typescript实现这个美国D3地图

---

有谁知道一些能帮我的好例子吗？我在任何地方都找不到任何好的帮助。谢谢

您可以为此创建一个组件，并利用

ViewChild

decorator引用模板的元素（svg和工具提示），并在

ngAfterViewInit

hook方法中配置它们

以下是使用示例：

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

@组件({
选择器：“美国地图”，
模板：`
`
})
导出类UsMapSvg{
@ViewChild（'工具提示'）
工具提示：ElementRef；
@ViewChild（'statesvg'）
statesvgElt:ElementRef；
ngAfterViewInit（）{
功能鼠标盖（d）{
d3.选择（“#工具提示”）.transition（）.duration（200）.style（“不透明度”，.9）；
d3.选择（“#工具提示”）.html（工具提示（d.n，数据[d.id]））
.style（“左”，“d3.event.pageX）+“px”）
.style（“top”，（d3.event.pageY-28）+“px”）；
}
函数mouseOut（）{
d3.选择（“工具提示”）
.transition（）
.持续时间（500）。样式（“不透明度”，0）；
}
设UstatePath=（…）
d3.select（this.statesvg.nativeElement）。selectAll（“.state”）
.data（UstatePath）.输入（）
.append（“路径”）
.attr（“类别”、“状态”）
.attr（“d”，函数（d）{返回d.d；}）
.style（“fill”，函数（d）{返回数据[d.id].color；}）
.on（“鼠标悬停”，（）=>{
d3.选择（this.tooltip.nativeElement）
.transition（）
.持续时间（200）
.样式（“不透明度”，.9）；
(...)
})
.on（“mouseout”，（）=>{
(...)
});
}
}

您可以为此创建一个组件，并利用

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

@组件({
选择器：“美国地图”，
模板：`
`
})
导出类UsMapSvg{
@ViewChild（'工具提示'）
工具提示：ElementRef；
@ViewChild（'statesvg'）
statesvgElt:ElementRef；
ngAfterViewInit（）{
功能鼠标盖（d）{
d3.选择（“#工具提示”）.transition（）.duration（200）.style（“不透明度”，.9）；
d3.选择（“#工具提示”）.html（工具提示（d.n，数据[d.id]））
.style（“左”，“d3.event.pageX）+“px”）
.style（“top”，（d3.event.pageY-28）+“px”）；
}
函数mouseOut（）{
d3.选择（“工具提示”）
.transition（）
.持续时间（500）。样式（“不透明度”，0）；
}
设UstatePath=（…）
d3.select（this.statesvg.nativeElement）。selectAll（“.state”）
.data（UstatePath）.输入（）
.append（“路径”）
.attr（“类别”、“状态”）
.attr（“d”，函数（d）{返回d.d；}）
.style（“fill”，函数（d）{返回数据[d.id].color；}）
.on（“鼠标悬停”，（）=>{
d3.选择（this.tooltip.nativeElement）
.transition（）
.持续时间（200）
.样式（“不透明度”，.9）；
(...)
})
.on（“mouseout”，（）=>{
(...)
});
}
}

javascript是有效的typescript，因此您链接的示例应该很好。：）您是否需要帮助设置angular 2项目来执行相同的操作？javascript是有效的typescript，因此您链接的示例应该可以您是否需要帮助设置angular 2项目来完成同样的工作？谢谢，当您编写“elementRef”时，您试图引用哪些元素？不客气！我使用#引用元素（例如

）。

ViewChild

中的参数对应于

之后的参数

ElementRef

是围绕DOM元素的“包装器”…还有一个问题：在这几行d3.select（#tooltip”）.html（tooltip（d.n，data[d.id]）.style（“left”，（d3.event.pageX）+“px”）.style（“top”，（d3.event.pageY-28）+“px”）；它无法识别工具提示或数据。我应该使用这个工具提示吗？还有pageX和pageY指的是什么页面？谢谢，当你写“elementRef”时，你想指的是什么元素？不客气！我使用#引用元素（例如

）。

ViewChild

中的参数对应于

之后的参数

ElementRef

是围绕DOM元素的“包装器”…还有一个问题：在这几行d3.select（#tooltip”）.html（tooltip（d.n，data[d.id]）.style（“left”，（d3.event.pageX）+“px”）.style（“top”，（d3.event.pageY-28）+“px”）；它无法识别工具提示或数据。我应该使用这个工具提示吗？pageX和pageY指的是什么页面？