使用 p5 和 Javascript 过滤显示内容的函数

Question

javascript 编程新手。我正在使用 p5.js（及其 p5.dom 库）创建条形图可视化。

我有一个数据集，其中列出了人们的姓名、身高和他们上学时所在的州。这是它的部分片段：

var height = [{name:"A",height:1,school:"FL"},
{name:"B",height:5,school:"MI"},
{name:"C",height:2,school:"MI"},
{name:"D",height:5,school:"CA"},
{name:"E",height:4,school:"FL"},
{name:"F",height:3,school:"MA"}];

我还创建了一种方法来根据每个人的身高创建条形图，以及每个学校的按钮（将在下面进一步解释）：

function setup() {
  createCanvas(300,150);
  fill_color = color(125,125,125);

  h1 = createElement('h1', '');

  fl_button = createButton("FL", "FL");
  fl_button.mousePressed(filterschool);
  mi_button = createButton("MI", "MI");
  mi_button.mousePressed(filterschool);
  ca_button = createButton("CA", "CA");
  ca_button.mousePressed(filterschool);
  ma_button = createButton("MA", "MA");
  ma_button.mousePressed(filterschool);
  reset_button = createButton("reset", "reset");

}

function draw() {
  var idx = -1; 
  for (idx in height) {
    var heading = height[idx].name;
    var val = height[idx].height;

    //Bars
    fill(fill_color);
    stroke();
    rect(idx*15, 100, 10, -val*10);

    //Names
    fill(fill_color);
    noStroke();
    text(heading, idx*15+2, 115);
    }
}

现在，我想做的是能够根据每个人就读的学校过滤所看到的内容。例如，如果我单击 "FL" 按钮，我只想查看与学校值为 "FL" 的学生相关的条形图。我开始编写一个函数来执行此操作：

function filterschool(e) {
    alert(e.srcElement.value)
    if (value == "MI") {
        //create a new variable? not sure
    }
}

但我不确定如何正确设置它。

我所做的一次尝试是更改 function filterschool(e) 以创建一个新变量：

function filterschool(e) {
    alert(e.srcElement.value)
    if (value == "MG") {
        school == value
    }
}

然后在function draw()中引用新变量：

if (height[idx].school == value) {
        fill(fill_color);
        stroke();
        rect(idx*15, 100, 10, -val*10);

    //Names
        fill(fill_color);
        noStroke();
        text(heading, idx*15+2, 115);
        }

但我不确定如何在 function setup() 中定义 value 以在一开始就接受所有学校位置（在按下任何按钮之前）。另外，即使这行得通，我也不确定整个方法是否正确。

如有任何帮助，我们将不胜感激。

Answer 1

看起来你很接近！这有点难说，因为你只粘贴了半工作代码的片段，但看起来你所拥有的基本上应该可以工作，只要你像这样修改你的 filterschool 回调：

function filterschool(e) {
  value = e.srcElement.value;
}

= 会将按钮的值分配给变量 value，您可以在绘制函数中引用该变量（就像在您粘贴的最后一个代码块中一样）。

根据您的目的，您可能还需要添加一个在 !value 时显示所有柱的案例。如果将其值设置为 ""，则以这种方式实现重置按钮会更容易。（当然，您也可以只保留重置按钮的值，然后检查 value == "reset" - 任何漂浮的东西。）希望它有所帮助！

使用 p5 和 Javascript 过滤显示内容的函数

Function that filters what is shown using p5 and Javascript

javascript

processing

p5.js