¿Cómo podemos usar D3.js, d3-delaunay para crear un fondo Voronoi? La guía de la página oficial es realmente difícil de seguir. La página de ejemplo es aún peor. Por ejemplo :
view = { const context = DOM.context2d(width, height); context.clearRect(0, 0, width, height); context.fillStyle = "black"; context.beginPath(); voronoi.delaunay.renderPoints(context, 1); context.fill(); context.lineWidth = 1.5; const segments = voronoi.render().split(/M/).slice(1); let i = 0; for (const e of segments) { context.beginPath(); context.strokeStyle = d3.hsl(360 * Math.random(), 0.7, 0.5); context.stroke(new Path2D("M" + e)); if (i++ % 5 === 0) yield context.canvas; } } No hay otra estructura de código básica: importar D3, declarar variables y apuntar a un elemento HTML. ¿Cómo aplicar y usar este objeto de view entonces?
He mirado alrededor en línea. Todavía no puedo encontrar ninguna guía confiable para d3-delaunay . ¿Algunas ideas?
EDITAR:
Solo quiero usar d3-delaunay en una página web, HTML simple con JS clásico, sin nada de Observerable HQ. Pero la documentación de D3.js está estrechamente relacionada con Observable HQ. Así que no tengo idea de cómo hacer que d3-delaunay funcione.
Al creador o al equipo de D3.js nunca parece importarle lo hostil y contraintuitivo que es Observerable HQ para algunos usuarios. Las plataformas como Codepen son geniales. Pero, ¿cómo se puede concebir y crear una plataforma como Observerable HQ? Crea otra GRAN capa de obstáculos innecesarios en una biblioteca de JavaScript.
Aquí hay un posible código convertido. Tenga en cuenta que puede conectar fácilmente la API DOM con abstracciones de Observablehq, perdiendo la reactividad del tiempo de ejecución de Observablehq.
<script type="module"> import * as d3 from "https://cdn.skypack.dev/d3@7"; const w = window.innerWidth; const h = (w * 9) / 16; const canvas = document.createElement("canvas"); const context = canvas.getContext("2d"); // DOM.context2d(width, height); canvas.width = w; canvas.height = h; const data = Array(100) .fill() .map((_, i) => ({ x: (i * w) / 100, y: Math.random() * h })); const voronoi = d3.Delaunay.from( data, (d) => dx, (d) => dy ).voronoi([0, 0, w, h]); context.clearRect(0, 0, w, h); context.fillStyle = "black"; context.beginPath(); voronoi.delaunay.renderPoints(context, 1); context.fill(); context.lineWidth = 1.5; const segments = voronoi.render().split(/M/).slice(1); let i = 0; for (const e of segments) { context.beginPath(); context.strokeStyle = d3.hsl(360 * Math.random(), 0.7, 0.5); context.stroke(new Path2D("M" + e)); } // no yield context.canvas; as we're not on a generator document.querySelector("#app").appendChild(canvas); </script> <div id="app"></div>