svg - Processing を使用して、SVG との対話性を作成する

Question

ここで何か助けが得られることを願っています。何度も何度も調査と試行を重ねてきましたが、解決策が見つからないようです。私は処理2.0.3を使用しています。

米国の州の地図である SVG ファイルがあります。各州のデータを含む .csv として保存された Excel シートがあります。表示されたSVGファイルの状態をクリックして、Excelシートのデータからある種のグラフを表示する方法を見つけようとしていました。

私の質問は次のとおりです: SVG ファイルをクリック可能にするにはどうすればよいですか? また、それをデータにリンクするにはどうすればよいですか? 私がインターネットで見た解決策は、すべての状態がわずかに異なる色を持つ非表示の形状レイヤーを作成することです。マウスをクリックしてその色を検出すると、色が決定され、データから読み取られます。見つけた例を再現しようとしましたが、意味がなく、壁にいるように感じます。誰かに助けや提案があれば、それは大いに役立ちます! 前もって感謝します！

これまでのコードは、そのほとんどがhttp://forum.processing.org/one/topic/need-help-with-mouse-over-text-box-display-on-us-map.htmlから適応したものです。動いていない... ：/

PShape states;
PShape buff;
Table crime;
PGraphics pg;
int rowCount;
int start = 100;
int yrButton = 0;
float crimeButton = 0;
boolean mouseShowText = false;
String[] textToShow = {"HI","RI","CT","MA","ME","NH","VT","NY","NJ","FL","NC","OH","IN","IA",
 "CO","NV","PA","DE","MD","MI","WA","CA","OR","IL","MN","WI","DC","NM","VA","AK","GA","AL",
  "TN","AZ","UT","ND","SD","NE","MS","MO","AR","OK","KS","LA"};
void setup(){
  size(1000,700);
  crime = loadTable("crime.csv");
  states = loadShape("states.svg");
  rowCount = crime.getRowCount();
  pg = createGraphics(700,500);
  pg.beginDraw();
  pg.background(0);
  makeHiddenMap(textToShow);
  pg.endDraw();
  noLoop();
}

void draw(){
  background(222,250,248);
  fill(200);
  rect(0,0,575,400);
  shape(states,0,0,700,500);
}

void makeHiddenMap(String[] states){
  pg.stroke(255);
  for(int i=0;i<states.length;i++){
    PShape buff = states.getChild(states[i]);
    buff.disableStyle();
    pg.fill(count+10,0,0);
    pg.noStroke();
    pg.shape(buff,0,0);
    textToShow[count] = states[i] + winText;
    count++;
  }
}

void showMouseOver(){
  String textMouseOver=textToShow[numberOfState];
  if (!textMouseOver.equals("")){
    float posX=textX;
    float posY=textY;
    if (posX+textWidth(textMouseOver)+10 > width){
      posX=width-textWidth(textMouseOver)-12;
    }
    fill(255,255,44);
    rect(posX+14,posY+4,textWidth(textMouseOver)+5,20);
    fill(0);
    text(textMouseOver,posX+16,posY+4+16);
  }
}