在p5.js中将值映射到d3.voronoi

时间:2018-02-02 20:58:31

标签: d3.js processing p5.js

我一直在使用p5.js一段时间,但我只是拿起d3 / p5来制作一些voronoi图表。我有一个现有的程序,其中512点的数组映射到屏幕。我想用这些点制作一个voronoi图。

我能找到的唯一相关参考是http://codepen.io/sepans/pen/Qbgaby

但是,该程序仅在函数设置()中运行,因为它是静态程序。这是开始:

function setup() {


  var width = 1500,
    height = 1000;


  // randomly generate vertices in [[123,57],[43,67], ..] format

  var vertices = d3.range(100).map(function(d) {
    return [Math.random() * width, Math.random() * height];
  });

  // using d3.js voronoi layout to calculate voronoi polygons

  var voronoi = d3.geom.voronoi()
    .clipExtent([
      [0, 0],
      [width, height]
    ]);

我不确定如何将这些元素移动到函数draw()中,以便我的连续动态变量可以输入到图表中。

这可能不是100%明确,所以如果有人对如何更有效地解释我的问题有任何建议,这将是伟大的。谢谢!

1 个答案:

答案 0 :(得分:0)

这个计划的关键是这一行:

vertices

请尝试了解此代码的用途。它用{100}随机点填充vertices数组。

你说你想用你从其他地方收集的点填充你的图表。你需要摆脱这一行并用你的积分填充CREATE TRIGGER tr_check_minutes BEFORE INSERT ON hours_worked REFERENCING NEW ROW AS NEW FOR EACH ROW BEGIN ATOMIC IF (SELECT sum(minutes) + NEW.minutes FROM hours_worked WHERE date = NEW.date) > 1440 THEN SIGNAL SQLSTATE '45000' SET MESSAGE_TEXT = 'too many hours'; END IF; END 。我能给你的最好的建议是break your problem down into smaller pieces并一次把这些作品拿出来。

例如,只需几个硬编码点即可实现此功能。然后在单击鼠标时尝试添加点。不要担心你的最终目标,只需让这些简单的例子起作用。然后,如果您遇到问题,可以发布MCVE以及更具体的问题。祝你好运。