1

我正在尝试在 React 组件中显示 D3 地理投影。

查看任何页面时，此错误发生在 D3 Geo 投影模块内：

对象不支持属性或方法“readFileSync”

它在模块的 index.js 中的这一行被抛出：

module.exports = new Function("d3", 
  fs.readFileSync(path.join(__dirname, "d3.geo.projection.js"), "utf-8"));

以下是添加到package.jsonas 依赖项的模块：

"d3": "^3.5.16",
"d3-geo-projection": "^0.2.16",
"topojson": "^1.6.25"

以下是我GeoMap使用 D3 地理投影插件的 React 组件的代码：

var React = require('react');
var ReactDOM = require('react-dom');
var d3 = require("d3");

require("d3-geo-projection")(d3);

var d3GeoMap = {};

d3GeoMap.create = function(el, props, state) {
    var svg = d3.select(el).append("svg")
        .attr("class", "geoChart")
        .attr("width", props.width)
        .attr("height", props.height);

    this.update(el, state);
};

d3GeoMap.update = function(el, state) {
    d3.select(el).select("svg").append("rect")
        .data(state.data)
        .enter()
        .attr("class", "map")
        .attr("d", d3.geo.path().projection(d3.geo.mercator()));
};

var GeoMap = React.createClass({
    propTypes: {
        data: React.PropTypes.object
    },

    componentDidMount: function() {
        var el = this.refs.geoRoot;
        d3GeoMap.create(el,
            {
                width: 900,
                height: 900
            },
            {
                data: this.props.data
            });
    },

    render: function() {
        return (<div ref="geoRoot"></div>);
    }
});

module.exports = GeoMap;

注意：点击任何页面时都会发生此错误，即使是那些不使用我的GeoMap组件的页面。

有谁知道为什么 D3 Geo Projection 插件找不到“fs”模块？

4

1 回答 1

0

require("d3-geo-projection")当捆绑时假定它fs.readFileSync被替换为实际代码，例如在 browserify 中是通过brfs 转换完成的

但是 index.js 文件只是在执行以下操作

module.exports = function (d3) {
  // all the code of ./d3.geo.projection.js is included here
}

因此，如果您不使用带有此转换的捆绑器，请改用此

var d3 = require("d3");
// assumes that d3 is already defined here
require("d3-geo-projection/d3.geo.projection")
于 2016-05-04T21:34:19.640 回答