Функция, которая фильтрует то, что показано с помощью 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); 
     } 

, но я не был уверен, как определить value в function setup(), чтобы принять все школьные места в начале (до нажатия любой кнопки). Кроме того, даже если это сработало, я не уверен, что весь этот подход был бы правильным в любом случае.

Любая помощь была бы принята с благодарностью.

Answer 1

Похоже, вы рядом! Это немного трудно сказать, так как вы вставили только фрагменты половины рабочего кода, но, похоже, что у вас есть в основном должен работать до тех пор, как вы измените filterschool обратный вызов, как это:

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

= присвоит кнопку он значение переменной value, которую вы можете указать в своей функции рисования (как в последнем скобке кода, который вы вставили).

В зависимости от того, что вы собираетесь делать, вам, вероятно, также потребуется добавить кейс, который показывает все бары, когда !value. Было бы проще реализовать кнопку сброса таким образом, если вы установите ее значение "". (Вы также можете просто оставить значение кнопки сброса, так как это, конечно же, и вместо value == "reset" - независимо от того, что плавает ваша лодка.) Надеюсь, это поможет!