D3 Geo Projection Plugin kann Modul 'fs' nicht finden

Question

Ich versuche eine D3 Geo Projektion in einer React Komponente anzuzeigen.

Wenn jede Seite sehen, geschieht dieser Fehler innerhalb des D3 Geo-Projektionsmodul:

Objekt unterstützt keine Eigenschaft oder Methode ‚readFileSync‘

Es befindet sich auf dieser Linie in der geworfen wird Moduls index.js:

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

Hier sind die zusätzlichen Module zum package.json als Abhängigkeiten:

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

Im Folgenden ist der Code für meine GeoMap Reagieren Komponente D3 geo Projektion Plugin:

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; 

HINWEIS: Dieser Fehler tritt auf, wenn jede Seite schlagen, auch diejenigen, die meine nicht GeoMap Komponente verwenden .

Hat jemand einen Einblick, warum das D3 Geo Projection Plugin das 'fs' Modul nicht finden kann?

Answer 1

require("d3-geo-projection"), wenn davon ausgegangen, dass gebündelte fs.readFileSync mit dem eigentlichen Code ersetzt wird, die zum Beispiel in browserify mit den brfs transform

erfolgte jedoch die index.js Datei nur wird die folgenden

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

Deshalb tun, wenn Sie sind nicht ein Bündler mit dieser Transformation Verwendung mit diesem stattdessen

var d3 = require("d3"); 
// assumes that d3 is already defined here 
require("d3-geo-projection/d3.geo.projection")