React: d3.event एक ReactJS + d3JS घटक में रिक्त है

मैं एक संगठन चार्ट बनाने के लिए ReactJS, d3JS और ES6 का उपयोग कर रहा हूं। मैं चार्ट बना सकता हूं और इसे देख सकता हूं। लेकिन मैं चार्ट में ज़ूम और ड्रैग व्यवहार जोड़ना चाहता हूं, इसलिए मैंने d3.behavior.zoom का उपयोग किया। मैं देख सकता हूं कि ज़ूम की गई विधि कहलाती है, लेकिन d3.event शून्य है।

मैंने ज़ूम व्यवहार को div, svg और g से जोड़ने का प्रयास किया लेकिन कुछ भी मदद नहीं करता है। ज़ूम किया गया व्यवहार कहा जाता है लेकिन घटना शून्य है।

मेरे ASP.NET प्रोजेक्ट में मैंने सुनिश्चित किया है कि मेरे पास systemJS कॉन्फ़िगरेशन के अलावा d3.js का कोई संदर्भ नहीं है, जो कि d3.event शून्य क्यों है, से संबंधित समस्या के रूप में उल्लिखित कई स्टैकओवरफ़्लो उत्तर हैं।

मेरा कोड इस https://github.com/Swizec/candidate-bucket-chart/blob/169779e110c8825f4545c71ae5845ff7bad4f1f4/src/BubbleChart.jsx जैसे उदाहरण के समान है जो ReactJS के पुराने संस्करण का उपयोग करता है।

यह मेरा सिस्टमजेएस कॉन्फ़िगरेशन है:

<script>
    System.defaultJSExtensions = true;
    System.config({
        map: {
            'rx': "https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.7/rx.all.min.js",
            'react': 'https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js',
            'react-dom': 'https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js',
            'd3': 'https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js'
        }
    });
    System.import('../app/app.js');
</script>

import React, { Component } from 'react';
import * as Rx from 'rx';
import * as d3 from 'd3';
import Person from './person';

class OrgChart extends Component {

    constructor(props) {
        super(props);

        this.state = { persons: [] };
    }

    componentWillMount() {
        // Just read a JSON file
        var source = Rx.Observable.fromPromise($.getJSON("/js/org-persons.json"));

        source.subscribe(
            function(chart) {
                var tree = d3.layout.tree()
                    .nodeSize([110, 50])
                    .separation(function() {
                        return 1;
                    });

                var nodes = tree.nodes(chart[0]).reverse();

                var links = tree.links(nodes);

                var p = [];

                nodes.forEach(function(node) {
                    fs.push((<Person x={node.x} y={node.y}></Person>));
                }.bind(this));

                this.setState({ person: p });

            }.bind(this)
        );
    }

    componentDidMount() {
        var rootX = document.body.clientWidth / 4;
        var rootY = 300;

       // A standard setup with d3 to use it's zoom/drag behavior
        var zoom = d3.behavior.zoom()
            .scaleExtent([1, 10])
            .on("zoom", this.zoomed)
            .translate([rootX, rootY]);

       // Attach zoom behavior to the first group in the svg.
        d3.select("#viewport")
            .call(zoom);
    }

    // When I drag the svg, this function gets called but the event is null. d3 is a global object.
    zoomed() {
        d3.select("#viewport").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    }

   // renders an org chart
    render() {

        return (
            <div id='treeContainer'><svg id='fullTree' width='100%'>
                <g id='viewport'>
                    { this.state.persons }
                </g>
            </svg></div>
        );
    }
}

export default OrgChart;