Потоковый локальный файл для рисования карты с помощью d3 - PullRequest
Новая
       65

Потоковый локальный файл для рисования карты с помощью d3

1 голос
/ 26 мая 2020

Я нашел несколько полезных сведений для решения моей проблемы, но не могу решить головоломку самостоятельно.

Мой проект должен нарисовать карту с помощью d3. Основная проблема (как и для многих других) в том, что отображаемые файлы огромны. После некоторых тестов с файлами topo json я думаю, что лучший способ справиться с моей ситуацией - использовать файлы geojsonl .

Идея состоит в том, чтобы обновить карту поскольку файлы передаются в потоковом режиме, поэтому визуализация для пользователя является плавной, но я не могу заставить ее работать.

Я пытаюсь использовать nd json, но когда я попробуйте запустить его, я получаю сообщение об ошибке 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;

Кто-нибудь может написать код, который мне не хватает? И почему я столкнулся с этой ошибкой, даже если установлена ​​ файловая система ?

...