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

这里是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以在开始时（在按下任何按钮之前）接受所有学校位置。此外，即使这有效，我也不确定整个方法是否正确。

任何帮助将不胜感激。

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

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

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

根据您要做什么，您可能还需要添加一个案例，在!value时显示所有条形。如果将其值设置为 ""，则以这种方式实现重置按钮会更容易。（当然，您也可以保持重置按钮值不变，然后检查value == "reset" - 无论您的船漂浮在什么地方。希望对您有所帮助！

相关内容

最新更新

热门标签：