D3.js：d3-delaunay - 如何开始？

Posted 2023-03-16

【中文标题】D3.js：d3-delaunay - 如何开始？

【英文标题】：D3.js: d3-delaunay - how to get started?

【发布时间】：2021-10-12 02:41:36

【问题描述】：

我们如何使用 D3.js，d3-delaunay，来创建 Voronoi 背景？ official page 的指南真的很难遵循。 example page 更糟糕。对于example：

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;
  

没有其他基本代码结构 - 导入 D3、声明变量和定位 html 元素。那么如何应用和使用这个view对象呢？

我在网上浏览了一下。仍然找不到任何可靠的d3-delaunay 指南。有什么想法吗？

编辑：

我只想在网页上使用d3-delaunay，使用经典 JS 的纯 HTML，而不需要 Observerable HQ 的任何内容。但是 D3.js 的文档与 Observable HQ 紧密结合。所以我完全不知道如何让d3-delaunay 工作。

D3.js 的创建者或团队似乎从不关心 Observerable HQ 对某些用户来说是多么不友好和违反直觉。像 Codepen 这样的平台很棒。但如何构思和创建像 Observerable HQ 这样的平台？它在 javascript 库上创建了另一个不必要的大障碍层。

【问题讨论】：

您的问题是使用 d3-delaunay 的三合一问题 - 1) 您是否偏爱 SVG 或 Canvas 2) 您是否偏爱 SVG 或 canvas 3) 您有对经典 JS 和 HTML 与 Observable HQ 编码协议的偏好？您包含的 Observable 代码使用了画布，但您没有说明您想如何使用该库？

@RobinMackenzie 好问题！谢谢。可观察到的总部是脖子上的一大痛。我想不惜一切代价避免它。我只想在网页上使用 d3-delaunay，使用经典 JS 的纯 HTML。但是 D3.js 的文档与 Observable HQ 紧密结合。所以我不知道如何让 d3-delaunay 工作。我对 SVG 或 Canvas 没有特别的偏好，但我认为 Canvas 比 SVG 更灵活。

【参考方案1】：

这是一个可能的转换代码。请注意，您可以轻松地将 DOM API 与 Observablehq 抽象连接起来，从而失去 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) => d.x,
      (d) => d.y
    ).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>

【讨论】：

非常感谢您的回答！最后，我可以理解它是如何工作的！我不关心 Observablehq 运行时的反应，因为我不会在我的网页上运行 Observablehq，即使它是可能的。或者不可能，只是不在乎哈哈谢谢你