在angular2打字稿代码中将d3.events获取为null

问题描述

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

I am implementing tooltip in my d3 maps using the code from linkhttp://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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！