在ReactJS + d3JS组件中d3.event为null

问题描述

我正在使用 ReactJS，d3JS和ES6 创建组织结构图.我可以创建图表并查看它.但是我想将缩放行为添加到图表中，因此我使用了 d3.behavior.zoom .我可以看到调用了 zoomed 方法，但是 d3.event 为空.

I'm using ReactJS, d3JS and ES6 to create an org chart. I can create the chart and see it. But I want to add the zoom behavior to the chart, so I used d3.behavior.zoom. I can see the method zoomed is called, but the d3.event is null.

在我的ASP.NET项目中，我确保除systemJS配置外没有对 d3.js 的任何引用，该配置中许多stackoverflow答案都提到了与相关的问题d3.event 为空.

In my ASP.NET project I made sure that I don't have any reference to d3.js other than in the systemJS configuration which many stackoverflow answers mentioned as the issue related to d3.event is null.

这是我的systemJS配置:

This is my systemJS configuration:

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

OrgChart组件:

OrgChart component:

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() {
        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;

        var zoom = d3.behavior.zoom()
            .scaleExtent([1, 10])
            .on("zoom", this.zoomed)
            .translate([rootX, rootY]);

        d3.select("#viewport")
            .call(zoom);
    }

    zoomed() {
        d3.select("#viewport").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    }

    render() {

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

export default OrgChart;

推荐答案

如果您使用的是React，Babel或Webpack和d3.js v4，则似乎需要从d3选择中导入event才能使用d3.event

If you're using React, Babel or Webpack and d3.js v4, it looks like you need to import event from d3-selection in order to use d3.event

import * as d3 from 'd3';
import {event as currentEvent} from 'd3-selection';

您现在可以像使用d3.event一样使用currentEvent.有关更多信息，请参见 https://github.com/d3/d3/issues/2733

You can now use currentEvent the same way you'd use d3.event. See https://github.com/d3/d3/issues/2733 for more information.

这篇关于在ReactJS + d3JS组件中d3.event为null的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！