d3.event 使用 TypeScript 获取 null答案

【问题标题】：d3.event getting null with TypeScriptd3.event 使用 TypeScript 获取 null
【发布时间】：2015-12-03 23:12:01
【问题描述】：

抱歉，如果我遗漏了什么或者这个问题已经被回答了。请指出我已经回答的问题。

配置如下：

TypeScript v1.6.0-dev.20150907 
tslint v2.5.0-dev.5
d3 d3@^3.5.6

tsconfig.json：

  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "declaration": false,
    "noImplicitAny": true,
    "removeComments": false,
    "noLib": false,
    "sourceMap": true,
    "jsx": "react",
    "rootDir": ".",
    "outDir": "../dist/"
  }

现在这是我刚刚写的用于描述我的问题的最小 repo。

/// <reference path="tsd.d.ts" />
import * as React from "react";

interface INode extends d3.layout.tree.Node {
    id?: number;
    name?: string;
    x0?: number;
    y0?: number;
    weight?: number;
    _children?: INode[];
}

export class HelloMsg extends React.Component<{}, {}> {
    private svg: d3.Selection<INode>;
    private zoomListener: d3.behavior.Zoom<INode>;
    constructor() {
        super();
    }
    componentDidMount(): void {
        this.drawGraph();
    }
    zoomHandler(): void {
        // or d3.select(React.findDOMNode(this)).attr("transform", "translate(" + d3.behavior.zoom().translate() + ")scale(" + d3.behavior.zoom().scale() + ")");
        this.svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    }

    drawGraph() {
        this.zoomListener = d3.behavior.zoom()
            .scaleExtent([0.1, 3])
            // or .on("zoom", this.zoomHandler);
            .on("zoom", this.zoomHandler.bind(this));
        this.svg = d3.select(React.findDOMNode(this))
            .call(this.zoomListener.bind(this));
    }
    render(): JSX.Element {
        return <svg width={400} height={500}> </svg>;
    }
}

现在编译器给我一个错误说：

Property 'translate' does not exist on type 'Event'. 
Property 'scale' does not exist on type 'Event'.

在运行时它给出 d3.event 为null

供参考。 http://bl.ocks.org/robschmuecker/7880033 https://github.com/borisyankov/DefinitelyTyped/blob/master/d3/d3.d.ts

请提出一些建议，我对 D3 和 TypeScript 都很陌生，如果我遗漏了一些明显的东西，再次道歉。

【问题讨论】：

标签： javascript d3.js typescript

【解决方案1】：

我遇到了同样的问题，您需要对事件进行强制转换，然后使用它来进行翻译和缩放。

var evt:ZoomEvent = <d3.ZoomEvent> d3.event; this.svg.attr("transform", "translate(" + evt.translate + ")scale(" + evt.scale + ")");

对于 D3 由于 d3 使用单个全局值，因此无法真正知道正在处理什么事件，因此他们（.d.ts 文件的作者）将其留给用户来处理事件转换。

【讨论】：

我想知道如何将其翻译成拖放问题？