대량의 점의 2차원 그림

안녕하세요.
regl-scatterplot 발견(GiitHub) 후 그렇게 작동했어요.

WebGL-based Scatterplot build with Regl (regl-scatterplot demo)

100만 점(a million)을 그릴 경우 스크롤이 초점화되는 응답도 좋다1.

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>regl-scatterplot</title>
  <style type="text/css">
    #canvas-wrapper {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    #canvas {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div id="canvas-wrapper"><canvas id="canvas"></canvas></div>
  <script src="https://www.unpkg.com/[email protected]/dist/pub-sub-es.js"></script>
  <script src="https://npmcdn.com/[email protected]/dist/regl.js"></script>
  <script src="https://www.unpkg.com/[email protected]/dist/regl-scatterplot.js"></script>
  <script>
    const pointSize = 3;
    const nPoints = 10000;
    const colors = ['#00ff00', '#ff8080', '#8080ff'];

    const canvas = document.getElementById('canvas');
    const scatterplot = createScatterplot.default({canvas});
    scatterplot.set({pointSize});
    scatterplot.set({colorBy: 'category', pointColor: colors});

    const resizeHandler = () => scatterplot.set(canvas.getBoundingClientRect());
    resizeHandler();
    window.addEventListener('resize', resizeHandler);

    const rng = () => Math.random() * 2 - 1;
    const points = new Array(nPoints)
      .fill()
      .map(() => [
        rng(),  // x
        rng(),  // y
        Math.floor(Math.random() * colors.length)  // category
      ]);
    scatterplot.draw(points);
  </script>
</body>
</html>

Highcharts

Scatter plot with 1 million points(Highcharts demo)(많은 점을 그렸다) 저도 찾았어요. 그래서 조금 조사해봤어요.각 점의 색상을 지정하는 기능colorByPoint이 boost.js 내(WebGL을 사용하는 경우)에서 무효화된 것 같다2.
또한 간단한 regl를 사용하여 많은 드로잉 성능을 더욱 향상시키려는 시도는 "대량의 점의 2차원 그림"입니다. ↩
Scatter Plot Points don't retain individual color values when using boost.js (highcharts issue, GitHub) ↩

Reference

이 문제에 관하여(대량의 점의 2차원 그림), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kkdd/items/86a8395899f123573e33

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다