2015-10-27 60 views
0

我有一个非常基本的散点图,显示了地球上最大的撞击坑。 y轴是直径,x是年龄。处理链接()返回多个链接

我正在尝试创建一个交互,其中当您单击图形上的数据点时,会打开一个显示陨石坑wiki页面的链接。

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

有没有办法让它只返回一个条目。我试过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); 
} 

如果需要更多信息,请让我知道。

回答

1

您正在检查(又名轮询)鼠标是否按下每秒60次。相反投票的,你应该只使用一个事件功能,每点击鼠标时触发时间只有一次:在活动功能

void mousePressed() { 
    link(craterLink); 
} 

更多信息可以参考here找到。

+0

确定这是我使用该事件的当前代码。 – Joe

+0

@ user2142912你仍然在循环多个链接并打开一堆页面。在'draw()'函数中,设置你的'craterLink'变量。然后在我的答案中使用代码(也许检查为空)。 –

+0

@ user2142912是的,请参阅我刚发布的评论。 –