[英]Example of D3 USA Map done in angular2
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? 我想用angular2中的typescript来实现这个美国的D3地图http://bl.ocks.org/NPashaP/a74faf20b492ad377312任何人都知道一些可以帮助我的好例子吗? I couldn't find any good assistance for this anywhere. 我无论如何都找不到任何好的帮助。 Thanks. 谢谢。
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. 您可以为此创建一个组件,并利用ViewChild
修饰器引用模板的元素(svg和tooltip),并在ngAfterViewInit
钩子方法中配置它们。
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", () => {
(...)
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.