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 に答える