React: يعد d3.event فارغًا في مكون ReactJS + d3JS

أنا أستخدم ReactJS و d3JS و ES6 لإنشاء مخطط هيكلي. يمكنني إنشاء الرسم البياني ورؤيته. لكني أريد إضافة سلوك التكبير / التصغير والسحب إلى المخطط ، لذلك استخدمت d3.behavior.zoom . أستطيع أن أرى أن الطريقة التي تم تكبيرها تسمى ، لكن الحدث d3 . فارغ.

حاولت إرفاق سلوك التكبير / التصغير بـ div و svg و g ولكن لا شيء يساعد. يتم استدعاء سلوك التكبير ولكن الحدث فارغ.

في مشروع ASP.NET الخاص بي ، تأكدت من عدم وجود أي إشارة إلى d3.js بخلاف تكوين systemJS الذي ذكره العديد من إجابات stackoverflow على أنه المشكلة المتعلقة بكون d3.event فارغًا.

الكود الخاص بي مشابه جدًا لما هو موجود في مثال مثل هذا https://github.com/Swizec/candidate-bucket-chart/blob/169779e110c8825f4545c71ae5845ff7bad4f1f4/src/BubbleChart.jsx الذي يستخدم الإصدار القديم من ReactJS.

هذا هو تكوين نظام JS الخاص بي:

<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;