0

ここでは JavaScript プログラミングが初めてです。p5.j​​s (およびその 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
    }
}

しかし、これを適切に設定する方法がわかりません。

私が行った1つの試みは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()また、それが機能したとしても、このアプローチ全体がとにかく正しいかどうかはわかりません。

どんな助けでも大歓迎です。

4

1 に答える 1

0

近くにいるようです！filterschool半分しか機能していないコードのスニペットのみを貼り付けたので、見分けるのは少し難しいですが、コールバックを次のように変更する限り、基本的に機能するはずです。

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

=ボタンの値を変数に割り当てますvalue。これは、描画関数で参照できます (最後に貼り付けたコード ブロックと同様)。

目的に応じて、すべてのバーを表示するケースも追加する必要があるでしょう!value。値を に設定すると、この方法でリセット ボタンを実装する方が簡単になります""。（もちろん、リセットボタンの値をそのままにして、value == "reset"代わりにチェックすることもできます-ボートが浮かんでいるものは何でも。）それが役に立てば幸いです！

于 2015-01-23T05:03:57.960 に答える