Question

道歉，如果我遗失某些内容或者此问题已经得到解答。如果问题已经回答，请指出我的问题。

配置如下：

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/"
  }

现在这是我写的最小回购，用来描述我的问题。

/// <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都很陌生，如果我错过了一些明显的东西，我会再次道歉。

Answer 1

我遇到了同样的问题，你需要对事件进行投射，然后使用它来获得翻译＆amp;规模。

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

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

d3.event使用TypeScript获取null

1 个答案: