Question

我有一个非常基本的散点图，显示了地球上影响最大的陨石坑。 y轴是直径，x是年龄。

我正在尝试创建一个交互，当您单击图表上的数据点时，会打开显示陨石坑维基页面的链接。

我有它工作，但是当你点击数据点时，会为循环中的每个条目打开一个页面。我得到了同一页的十几个。

有没有办法让它只返回一个条目。我试过noLoop（）;这样做，它只返回相关的条目，但它会停止程序，使它可以更长时间点击其他数据点。

我在下面提供了相关代码。

int rowNumber; //set rowNumber as an integer
int dataWH = 10; //data width/height
int row = 0; 

Table craterWiki = loadTable("craterWiki.tsv"); //loads and parses tsv data into rows and columns
String craterLink = craterWiki.getString(row, 5);

PFont font;
PFont fontTitle;

void setup() {
  size(1120, 920);
  rowNumber = craterWiki.getRowCount(); //number of rows
  font = loadFont("CourierNewPSMT-14.vlw");
  fontTitle = loadFont("CourierNewPSMT-18.vlw");

}

void draw() {
  background(#111727);
  textFont (font, 14);
  textSize(14); //deafult font size
  stroke(180);
  fill(180, 200);

  int vertx = 45;  // location of y-axis title on x
  int verty = 460; // location of y-axis title on y
  int headx = 560; // location of header on x
  int heady = 50;  // location of header on y
  int infox = 560; // location of crater info on x
  int infoy = 400; // location of crater info on y

  // x-axis setup (crater age)
  textAlign(CENTER);
  line(100, 830, 1024, 830); // x-axis line
  for (int i = 0; i < 16; i++) { // loops x-axis data in 16 increments
  text (i*150, i * 60 + 100, 850); // 16 increments of 150, spacing between    each increment, and location of the chain
  }
   textFont (fontTitle, 18);
   text("Crater Age (million years)", 560, 885);

  // y-axis setup (crater diameter)
  textAlign(CENTER);
  textFont (font, 14);
  line(100, 80, 100, 830); // y-axis line
  for (int i = 0; i < 16; i++) { // loops y-axis data in 16 increments
  text (i*20, 80, 830-i*49); //16 increments of 20, spacing between each   increment, and location of the chain
  }
  pushMatrix(); //reset matrix stack
  translate(vertx,verty); //location of y-axis title
  rotate(-HALF_PI); //make text vertical
  textFont (fontTitle, 18);
  text("Crater Diameter (km)", 0, 0);
  popMatrix();

  pushMatrix(); //reset matrix stack
  translate(headx,heady); //location of header title
  textFont (fontTitle, 18);
  text(" Largest Impact Craters on Earth", 0, 0);
  popMatrix();
  textFont (font, 14);

// data point draw loop
for (int row = 0; row < rowNumber; row++) {

// define/load table again
Table craterWiki = loadTable("craterWiki.tsv");

// crater names displayed above data point and in center 
gString craterName = craterWiki.getString(row, 0);

// crater location displayed in center
String craterLocation = craterWiki.getString(row, 1);

// crater size displayed in center
String craterCountry = craterWiki.getString(row, 2);

String craterLink = craterWiki.getString(row, 5);

// crater size displayed in center
float craterSize = craterWiki.getFloat(row,  3);
float y = map(craterSize, 0, 300, 825, 100);

// crater age displayed in center
float craterAge = craterWiki.getFloat(row, 4);
float x = map(craterAge, 0, 2250, 100, 1024);

// data point ellipse based off of the actual diameter of the crater (craterSize)
noStroke();
fill(#FFBA00, 180);
ellipse(x, y, dataWH*craterSize/45, dataWH*craterSize/45);


// mouse interaction
textAlign(CENTER);
fill(180, 200);

// when mouse is over the craterSize ellipse display the text below
if(dist(x, y, mouseX, mouseY) < (dataWH*craterSize/45))  {
  pushMatrix();
  translate(infox,infoy);
  text( "Crater Name: " + craterName, 0, 0);
  text( "Location: " + craterLocation, 0 , 60);
  text( "Country: " + craterCountry, 0 , 80);
  text( "Age: " + craterAge +" million years", 0 , 40);
  text( "Diameter: " + craterSize + "km", 0 , 20);
  popMatrix();

  //second ellipse is also created when the mouse is over the craterSize ellipse
  int dataWH = 12;
  text(craterName, x, y - dataWH*craterSize/90 - 5);
  fill(#FFD564, 180);
  ellipse(x, y, dataWH*craterSize/45, dataWH*craterSize/45);

  }
 }  
}


// if mouse pressed display crater wiki page

 void mousePressed() { 

 link(craterLink); 
}

如果需要更多信息，请告知我们。

Answer 1

您正在检查（又名投票）是否每秒按下鼠标60次。您应该使用仅在每次点击鼠标时触发一次的事件函数，而不是轮询：

void mousePressed() { 
   link(craterLink); 
}

有关事件功能的更多信息，请参阅参考here。

处理link（）返回多个链接

1 个答案: