javascript - ローカル ファイルをストリーミングして d3 でマップを描画する

Question

問題を解決するのに役立つ情報をいくつか見つけましたが、パズルを自分で解決することはできません。

私のプロジェクトでは、d3 でマップを描画する必要があります。主な問題 (他の多くの問題と同様) は、表示されるファイルが巨大であることです。topojsonファイルでいくつかのテストを行った結果、私の状況を処理する最善の方法はgeojsonlファイルを使用することだと思います。

ユーザーの視覚化が流動的になるように、ファイルがストリーミングされるときにマップを更新するという考えですが、それを機能させることはできません。

ndjsonを使用しようとしていますが、実行しようとするとエラーが発生しますfs.createReadStream is not a function。

これが私のコードです：

import { select, geoPath, geoMercator} from "d3";
import fs from "file-system";
import ndjson from "ndjson";

function GeoChart() {
  const [selectedCountry, setSelectedCountry] = useState(null);

  /*********************** MAIN PROBLEM *****************************/
  /******************************************************************/
  fs.createReadStream('./pathtomyfile/europe.geojsonl')
  .pipe(ndjson.parse())
  .on('data', function(obj) {
    // obj is a javascript object
  })

  //........
  //Anyone here?
  //........

  var europe = // How can i update this variable with the stream???
  /******************************************************************/

  // will be called initially and on every data change
  useEffect(() => {
    const svg = select(svgRef.current);

    // use resized dimensions
    const { width, height } = dimensions;

    // projects geo-coordinates on a 2D plane
    const projection = geoMercator();

    // takes geojson data,
    // transforms that into the d attribute of a path element
    const pathGenerator = geoPath().projection(projection);

    // render each state
    svg
      .selectAll(".state")
      .data(europe.features)
      .join("path")
      .attr("class", "state")
      .attr("d", feature => pathGenerator(feature));

  }, [europe, dimensions, selectedCountry]);

  return (
    <div className={"map-container"} ref={wrapperRef}>
      <svg className={"map"} ref={svgRef}></svg>
    </div>
  );
}

export default GeoChart;

誰かが私が見逃しているコードを書いてもらえますか? ファイルシステムがインストールされているにもかかわらず、なぜそのエラーが発生したのですか?