d3.event 在打字稿实现中为空

Question

这是两个实现做同样的事情，这里我尝试生成最小的 repo，有两个实现。 这个没有使用 D3 的类型化定义

    import React from 'react';

export class ChartExample extends React.Component {
    constructor(props) {
        super();
    }

    componentDidMount() {
        let margin = {top: -5, right: -5, bottom: -5, left: -5},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

        this.zoom = d3.behavior.zoom()
            .scaleExtent([1, 10])
            .on("zoom", this.zoomed.bind(this));

        this.svg = d3.select(React.findDOMNode(this))
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.right + ")")
            .call(this.zoom);

            let rect = this.svg.append("rect")
                .attr("width", width)
                .attr("height", height)
                .style("fill", "none")
                .style("pointer-events", "all");

            this.container = this.svg.append("g");
            this.container.append("g")
                .attr("class", "x axis")
                .selectAll("line")
                .data(d3.range(0, width, 10))
                .enter().append("line")
                .attr("x1", function(d) { return d; })
                .attr("y1", 0)
                .attr("x2", function(d) { return d; })
                .attr("y2", height);

            this.container.append("g")
                .attr("class", "y axis")
                .selectAll("line")
                .data(d3.range(0, height, 10))
                .enter().append("line")
                .attr("x1", 0)
                .attr("y1", function(d) { return d; })
                .attr("x2", width)
                .attr("y2", function(d) { return d; });
    }
    zoomed() {
        this.container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    }

    render() {
        return <svg height={400} width={500}></svg>;
    }
}

这里使用D3的Typed定义，

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

export class ExampleGraph extends React.Component<{}, {}> {
    private i: d3.Primitive;
    private duration: d3.Primitive;
    private svg: d3.Selection<d3.selection.Group>;
    private zoom: d3.behavior.Zoom<d3.selection.Group>;
    private container: d3.Selection<d3.selection.Group>
    constructor() {
        super();
    }
    componentDidMount(): void {
        let margin = {top: -5, right: -5, bottom: -5, left: -5},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

        this.zoom = d3.behavior.zoom()
            .scaleExtent([1, 10])
            .on("zoom", this.zoomed.bind(this));

        this.svg = d3.select(React.findDOMNode(this))
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.right + ")")
            .call(this.zoom);

        let rect = this.svg.append("rect")
            .attr("width", width)
            .attr("height", height)
            .style("fill", "none")
            .style("pointer-events", "all");

        this.container = this.svg.append("g");
        this.container.append("g")
            .attr("class", "x axis")
            .selectAll("line")
            .data(d3.range(0, width, 10))
            .enter().append("line")
            .attr("x1", function(d) { return d; })
            .attr("y1", 0)
            .attr("x2", function(d) { return d; })
            .attr("y2", height);

        this.container.append("g")
            .attr("class", "y axis")
            .selectAll("line")
            .data(d3.range(0, height, 10))
            .enter().append("line")
            .attr("x1", 0)
            .attr("y1", function(d) { return d; })
            .attr("x2", width)
            .attr("y2", function(d) { return d; });
    }
    zoomed(): void {
        this.container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    }
    render(): JSX.Element {
        return <svg height={500} width={500}></svg>;
    }
}

两者都做同样的事情，这只是显示Zoming的最小实现，

但由于某种原因（在类型化实现中，第二个）当我尝试缩放（使用滚轮）时，断点被击中缩放功能但 d3.event 变为空，这在其他实现中非常好（没有 TypeScript）有人可以帮我解决这个问题，可能是我以错误的方式注册缩放事件，请提出建议，任何建议都会非常有帮助。

在 TypeScript 实现中，编译器也会给出错误提示：

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

Answer 1

我就是这样解决这个问题的：

// Here you create your zoom listener...
this.zoomListener = d3.behavior.zoom<d3Common.INode>()
            .scaleExtent(this.props.graphConfig.scaleExtent)
            .on('zoom', () => this.zoomHandler());

// here you get your scale and translate from your above zoom listener listener...
private zoomHandler(value: number): void {
        this.svg.attr('transform', 'translate(${this.zoomListener.translate()})scale(${this.zoomListener.scale()})');
    }

Answer 2

我遇到了类似的问题。问题是import * as d3 from "d3";。为了访问d3.events，您需要import d3 from 'd3';。 moment 的某些功能可能会出现类似问题。见http://www.typescriptlang.org/docs/handbook/modules.html#import