1

我找到了几条有用的信息来解决我的问题，但我自己无法解决这个难题。

我的项目必须用 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;

有人可以写我缺少的代码吗？为什么即使安装了文件系统，我也会遇到该错误？

4

0 回答 0