Question

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

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

Object不支持属性或方法'readFileSync'

在模块的index.js中抛出此行：

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

以下是作为依赖项添加到package.json的模块：

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

以下是使用D3地理投影插件的GeoMap 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'模块？

Answer 1

捆绑时

require("d3-geo-projection")假定fs.readFileSync替换为实际代码，例如在浏览器中使用brfs transform

但是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")

D3 Geo Projection插件无法找到模块'fs'

1 个答案: