使用处理，创建与SVG的交互

我希望我能在这里找到一些帮助，我一直在研究和尝试一次又一次，但似乎找不到解决办法。我正在使用processing 2.0.3

我有一个SVG文件，它是美国各州的地图。我有一张excel表格，保存为.csv格式，其中包含每个州的数据。我一直在试图找到一种方法，单击显示的SVG文件上的状态，让它显示excel工作表中数据的某种图形

我的问题是：如何使SVG文件可点击，以及如何将其链接到数据？ 我在互联网上看到的解决方案是创建一个不可见的形状层，所有状态都有一个稍微不同的颜色，点击鼠标检测颜色将确定颜色并从数据中读取。我试图重现我发现的例子，但它们毫无意义，我感觉自己就像站在一堵墙前。如果有人有任何帮助或建议，那将非常有用！提前谢谢

到目前为止，大部分代码都是从。它不起作用…：/

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);
  }
}

PShape状态；
形状浅黄色；
表1犯罪；
PGraphics-pg；
整数行数；
int start=100；
int=0；
浮动红色按钮=0；
布尔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”}；
无效设置（）{
规模（1000700）；
犯罪=加载表（“crime.csv”）；
states=loadShape（“states.svg”）；
rowCount=crime.getRowCount（）；
pg=createGraphics（700500）；
pg.beginDraw（）；
背景（0）；
makeHiddenMap（textToShow）；
pg.endDraw（）；
noLoop（）；
}
作废提款（）{
背景（22250248）；
填充（200）；
rect（0,0575400）；
形状（状态，0,0700500）；
}
void makeHiddenMap（字符串[]状态）{
pg.stroke（255）；
用于（int i=0；i宽度）{
posX=宽度textWidth（textMouseOver）-12；
}
填充（255255,44）；
rect（posX+14，posY+4，textWidth（textMouseOver）+5,20）；
填充（0）；
text（textMouseOver，posX+16，posY+4+16）；
}
}

您发布的方法很常见。也许发布一些你尝试过但不起作用的代码？我已经离开了这个例子，最后一条评论：但是我很迷茫，只是试图通读它并根据我的需要修改它。我想我只是不明白需要做什么，希望得到一个清晰的解释，而不是一堆代码？如果可以按顺序而不是一次全部绘制每个状态，则可以绘制到屏幕外缓冲区（使用

PGraphics

或

PImage

），该缓冲区与程序的画布大小相同，为每个状态使用不同的颜色。然后，当您编写

mouseClicked（）

事件时，您可以使用x和y坐标检查屏幕外缓冲区中的颜色，并确定它来自什么状态。基本上，您将在可见地图上的单击转换为在虚拟地图上的单击，并查看哪个状态与颜色匹配。@kevinsa5我可以显示到目前为止我所拥有的，我在这方面非常新，因此我不确定它们是否是单独绘制的。我将在原始帖子中添加我所拥有的内容，大部分内容都是从我之前评论中的链接中获得的。与本次讨论相关的程序部分是

makeHiddenMap（String[]states）

函数。在该函数中，您向它传递一个数组，循环该数组，将每个状态分别绘制到缓冲区。for循环

pg.fill内的行（计数+10,0,0）使每个状态的颜色不同；具体地说，每个状态都有一个比它之前的状态大一的红色值（因为
count
是通过循环的一次迭代添加的，并且
fill
采用R、G、B参数）。但是，此代码有几个问题--
计数
从未声明，重复的
状态
，等等。