在angular2打字稿代码中将d3.events获取为null [英] Getting d3.events as null in angular2 typescript code

问题描述

我正在使用链接中的代码在d3地图中实现工具提示 http://bl.ocks.org/michellechandra/0b2ce4923dc9b5809922

I am implementing tooltip in my d3 maps using the code from link http://bl.ocks.org/michellechandra/0b2ce4923dc9b5809922

当我在我的angular 2打字稿文件中编写相同的代码时.我收到错误消息:

When I write the same code in my angular 2 typescript file. I get error:

无法读取未定义的属性"transition"

Cannot read property 'transition' of undefined

基本上，它无法找到d3.event(将其获取为null)，而这在JavaScript代码中不会发生. 我在ngAfterViewInit中的代码

it is basically not able to find d3.event (getting it as null) which does not happen in javascript code. My code in ngAfterViewInit

ngAfterViewInit() {
        this.tooltip = d3.select("map-tag")
            .append("div")
            .attr("class", "tooltip")
            .style("opacity", 0);

        this.svgContainer = d3.select("map-tag").append("svg")
            .attr("width", this.width)
            .attr("height", this.height)
            .style("border", "2px solid steelblue")
            .call(this.zoom);
        this.usaSVG = this.svgContainer
            .append("path")
            .attr("d", this.geoPath(this.usaFeatureCollection))
            .style({ fill: "none", stroke: "black" });

        this.geoPoint1 = {
            "type": "MultiPoint", "coordinates": [[-80.6665134, 35.0539943]]
        };
        this.div = d3.select("map-tag")
            .append("div")
            .attr("class", "tooltip")
            .style("opacity", 0);
        this.pointPath = this.svgContainer.append("path").attr("d", this.geoPath(this.geoPoint1)).style("stroke", "#FFFFFF")
            .on('mouseover', function (d, i) {
                this.div.transition()
                    .duration(200)
                    .style("opacity", .9);
                this.div.text("sample text")
                    .style("left", (d3.event.x) + "px") // I get error here
                    .style("top", (d3.event.y - 28) + "px");
            })
           .on('mouseout', function (d, i) { d3.select(this).style({ fill: 'black' }); });

    }

/* Style for Custom Tooltip */
div.tooltip {   
    position: absolute;           
    text-align: center;           
    width: 60px;                  
    height: 28px;                 
    padding: 2px;             
    font: 12px sans-serif;        
    background: white;   
    border: 0px;      
    border-radius: 8px;           
    pointer-events: none;         
}

推荐答案

您需要从d3导入事件，如下所示:

You need to import event from d3 as below :

Import {event, BaseEvent} from "d3-selection"

这篇关于在angular2打字稿代码中将d3.events获取为null的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！