Javascript d3.event在typescript实现中变为null

这是两个实现在做同样的事情，我试图用两个实现生成最小回购。 这个没有使用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>;
    }
}

---

我就是这样解决的：

// 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()})');
    }

//在这里您可以创建缩放侦听器。。。
this.zoomListener=d3.behavior.zoom（）
.scaleExtent（此.props.graphConfig.scaleExtent）
.on（'zoom'，（）=>this.zoomHandler（））；
//在这里，您可以从上面的缩放侦听器中获得缩放和平移。。。
私有zoomHandler（值：number）：无效{
this.svg.attr（'transform'，'translate（${this.zoomListener.translate（）}）scale（${this.zoomListener.scale（）}'）；
}

我也有类似的问题。问题是，

import*作为“d3”中的d3。为了访问
d3.events
您需要
从“d3”导入d3。
moment
的某些功能也可能出现类似问题。参见
可能是一个相关问题。更多参考资料：您是否曾经在d3期间修复过此问题。事件不再存在。使用
函数（此，事件）
作为侦听器，然后直接使用
事件.transform
而不是
d3.event.translate
（
translate
已更改为
transform
）
Property 'translate' does not exist on type 'Event.
Property 'scale' does not exist on type 'Event'.

// 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()})');
    }