I think I did everything right but when I click the button "Batter Up!", nothing happens. Please help me figure out what kind of things I am missing here.
Here is the code:
var leftball = new Array(423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 421, 419, 418, 416, 414, 413, 411, 409, 407, 406, 404, 402, 401, 399, 397, 395, 394, 392, 390, 389, 387, 385, 383, 382, 380, 378, 377, 375, 373, 371, 370, 368, 366, 365, 363, 361, 359, 358, 356, 354, 353, 351, 349, 347, 346, 344, 342, 341, 339, 337, 335, 334, 332, 330, 329, 327, 325, 323, 322, 320, 318, 317, 315, 313, 311, 310, 308, 306, 305, 303, 301, 299, 298, 296, 294, 293, 291, 289, 287, 286, 284, 282, 281, 279, 277, 275, 274, 272, 270, 269, 267, 265, 263, 262, 260, 258, 257, 255, 253, 251, 250, 248, 246, 245, 243, 241, 239, 238, 236, 234, 233, 231, 229, 227, 226, 224, 222, 221, 219, 217, 215, 214, 212, 210, 208, 207, 205, 203, 202, 200);
var topball = new Array(365, 367, 369, 371, 373, 375, 377, 379, 381, 383, 385, 387, 389, 391, 393, 395, 397, 399, 401, 403, 405, 407, 409, 411, 413, 415, 417, 419, 421, 423, 425, 427, 429, 431, 433, 435, 437, 439, 441, 443, 445, 447, 449, 451, 453, 455, 457, 459, 461, 463, 465, 467, 469, 471, 473, 475, 477, 479, 481, 483, 485, 487, 489, 491, 493, 495, 497, 499, 501, 503, 500, 496, 492, 487, 483, 479, 475, 471, 466, 462, 458, 454, 450, 445, 441, 437, 433, 429, 425, 420, 416, 412, 408, 404, 399, 395, 391, 387, 383, 379, 374, 370, 366, 362, 358, 353, 349, 345, 341, 337, 333, 328, 324, 320, 316, 312, 307, 303, 299, 295, 291, 286, 282, 278, 274, 270, 266, 261, 257, 253, 249, 245, 240, 236, 232, 228, 224, 220, 215, 211, 207, 203, 199, 194, 190, 186, 182, 178, 173, 169, 165, 161, 157, 153, 148, 144, 140, 136, 132, 127, 123, 119, 115, 111, 107, 102, 98, 94, 90, 86, 81, 77, 73, 69, 65, 61, 56, 52, 48, 44, 40, 35, 31, 27, 23, 19, 14, 10, 6, 2, -2, -6, -11, -15, -19, -23, -27, -32, -36, -40);
var widthsize = new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 9, 17, 25, 33, 41, 49, 57, 65, 73, 81, 89, 97, 105, 113, 121, 129, 137, 145, 153, 161, 169, 177, 185, 193, 201, 209, 217, 225, 233, 241, 249, 257, 265, 273, 281, 289, 297, 305, 313, 321, 329, 337, 345, 353, 361, 369, 377, 385, 393, 401, 409, 417, 425, 433, 441, 449, 457, 465, 473, 481, 489, 497, 505, 512, 520, 528, 536, 544, 552, 560, 568, 576, 584, 592, 600);
var heightsize = new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 6, 9, 11, 14, 17, 19, 22, 25, 27, 30, 32, 35, 38, 40, 43, 46, 48, 51, 54, 56, 59, 62, 64, 67, 70, 72, 75, 78, 80, 83, 86, 88, 91, 94, 96, 99, 101, 104, 107, 109, 112, 115, 117, 120, 123, 125, 128, 131, 133, 136, 139, 141, 144, 147, 149, 152, 155, 157, 160, 163, 165, 168, 170, 173, 176, 178, 181, 184, 186, 189, 192, 194, 197, 200);
/////////////////////////////////////////////////////////////////
var timer;
var cycle = 0;
function moveBall(a, b) {
x = a + document.getElementById("ball").offsetLeft;
document.getElementById("ball").style.left = x + "px";
y = b + document.getElementById("ball").offsetTop;
document.getElementById("ball").style.top = y + "px";
}
function sizeSign(a, b) {
x = a + document.getElementById("homerun").offsetHeight;
document.getElementById("homerun").style.height = x + "px";
y = b + document.getElementById("homerun").offsetWidth;
document.getElementById("homerun").style.width = y + "px";
}
function runIt() {
if (cycle < 200) {
moveBall(leftball, topball)
} else if (cycle = 200) {
document.getElementById("ball").style.visibility = "hidden";
document.getElementById("homerun").style.visibility = "visible";
} else if (cycle < 275) {
sizeSign(heightsize, widthsize);
} else if (cycle = 275) {
clearInterval(timer);
}
cycle++;
}
function batterup() {
timer = setInterval(runIt, 50);
}
//////////////////////////////END////////////////////////////////
body {
background-color: blue;
}
#ballfield {
position: absolute;
top: 0px;
left: 0px;
margin-left: 150px;
margin-top: 10px;
z-index: -1;
}
#ball1 {
position: absolute;
top: 365px;
left: 423px;
z-index: 2;
visibility: visible;
}
#homerun {
position: absolute;
top: 200px;
left: 150px;
z-index: 3;
visibility: hidden;
height: 1px;
width: 1px;
}
#button1 {
position: absolute;
left: 15px;
top: 30px;
}
<input type="button" id="button1" value="Batter Up!" onclick="batterup()" />
<img src="baseballfield.jpg" alt="ballfield" id="ballfield" />
<img src="baseball.gif" alt="baseball" id="ball1" />
<img src="homerun.gif" alt="home run" id="homerun" />
And Images:
[baseball.gif]
[baseballfield.jpg]
[homerun.gif]
https://www.dropbox.com/s/idnjd49p2iuo3wu/ImagesBatter.zip?dl=0
I know this will just take you guys a little bit of time, please HELP!
Thanks!
If interpret Question correctly, javascript at OP passed arrays as string to functions, not element of array.
You can call .slice() at runIt() call to make copy of arrays, then reference element of copied array within functions which set .style using Array.prototype.shift().
Note also, comparison within if..else assigned value, did not check for equality of values.
<!DOCTYPE html>
<html>
<head>
<title>Batter</title>
<style type="text/css">
body {
background-color: blue;
}
#ballfield {
position: absolute;
top: 0px;
left: 0px;
margin-left: 150px;
margin-top: 10px;
z-index: -1;
}
#ball1 {
position: absolute;
top: 365px;
left: 423px;
z-index: 2;
visibility: visible;
}
#homerun {
position: absolute;
top: 200px;
left: 150px;
z-index: 3;
visibility: hidden;
height: 1px;
width: 1px;
}
#button1 {
position: absolute;
left: 15px;
top: 30px;
}
</style>
<script type="text/javascript">
var leftball = new Array(423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 423, 421, 419, 418, 416, 414, 413, 411, 409, 407, 406, 404, 402, 401, 399, 397, 395, 394, 392, 390, 389, 387, 385, 383, 382, 380, 378, 377, 375, 373, 371, 370, 368, 366, 365, 363, 361, 359, 358, 356, 354, 353, 351, 349, 347, 346, 344, 342, 341, 339, 337, 335, 334, 332, 330, 329, 327, 325, 323, 322, 320, 318, 317, 315, 313, 311, 310, 308, 306, 305, 303, 301, 299, 298, 296, 294, 293, 291, 289, 287, 286, 284, 282, 281, 279, 277, 275, 274, 272, 270, 269, 267, 265, 263, 262, 260, 258, 257, 255, 253, 251, 250, 248, 246, 245, 243, 241, 239, 238, 236, 234, 233, 231, 229, 227, 226, 224, 222, 221, 219, 217, 215, 214, 212, 210, 208, 207, 205, 203, 202, 200);
var topball = new Array(365, 367, 369, 371, 373, 375, 377, 379, 381, 383, 385, 387, 389, 391, 393, 395, 397, 399, 401, 403, 405, 407, 409, 411, 413, 415, 417, 419, 421, 423, 425, 427, 429, 431, 433, 435, 437, 439, 441, 443, 445, 447, 449, 451, 453, 455, 457, 459, 461, 463, 465, 467, 469, 471, 473, 475, 477, 479, 481, 483, 485, 487, 489, 491, 493, 495, 497, 499, 501, 503, 500, 496, 492, 487, 483, 479, 475, 471, 466, 462, 458, 454, 450, 445, 441, 437, 433, 429, 425, 420, 416, 412, 408, 404, 399, 395, 391, 387, 383, 379, 374, 370, 366, 362, 358, 353, 349, 345, 341, 337, 333, 328, 324, 320, 316, 312, 307, 303, 299, 295, 291, 286, 282, 278, 274, 270, 266, 261, 257, 253, 249, 245, 240, 236, 232, 228, 224, 220, 215, 211, 207, 203, 199, 194, 190, 186, 182, 178, 173, 169, 165, 161, 157, 153, 148, 144, 140, 136, 132, 127, 123, 119, 115, 111, 107, 102, 98, 94, 90, 86, 81, 77, 73, 69, 65, 61, 56, 52, 48, 44, 40, 35, 31, 27, 23, 19, 14, 10, 6, 2, -2, -6, -11, -15, -19, -23, -27, -32, -36, -40);
var widthsize = new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 9, 17, 25, 33, 41, 49, 57, 65, 73, 81, 89, 97, 105, 113, 121, 129, 137, 145, 153, 161, 169, 177, 185, 193, 201, 209, 217, 225, 233, 241, 249, 257, 265, 273, 281, 289, 297, 305, 313, 321, 329, 337, 345, 353, 361, 369, 377, 385, 393, 401, 409, 417, 425, 433, 441, 449, 457, 465, 473, 481, 489, 497, 505, 512, 520, 528, 536, 544, 552, 560, 568, 576, 584, 592, 600);
var heightsize = new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 6, 9, 11, 14, 17, 19, 22, 25, 27, 30, 32, 35, 38, 40, 43, 46, 48, 51, 54, 56, 59, 62, 64, 67, 70, 72, 75, 78, 80, 83, 86, 88, 91, 94, 96, 99, 101, 104, 107, 109, 112, 115, 117, 120, 123, 125, 128, 131, 133, 136, 139, 141, 144, 147, 149, 152, 155, 157, 160, 163, 165, 168, 170, 173, 176, 178, 181, 184, 186, 189, 192, 194, 197, 200);
var _leftball, _topball, _widthsize, _heightsize;
/////////////////////////////////////////////////////////////////
var timer;
var cycle = 0;
function moveBall(a, b) {
var x = a + document.getElementById("ball").offsetLeft;
document.getElementById("ball").style.left = x + "px";
var y = b + document.getElementById("ball").offsetTop;
document.getElementById("ball").style.top = y + "px";
console.log(x, y);
}
function sizeSign(a, b) {
var x = a + document.getElementById("homerun").offsetHeight;
document.getElementById("homerun").style.height = x + "px";
var y = b + document.getElementById("homerun").offsetWidth;
document.getElementById("homerun").style.width = y + "px";
}
function runIt() {
if (cycle < 200) {
moveBall(_leftball.shift(), _topball.shift())
} else if (cycle === 200) {
document.getElementById("ball").style.visibility = "hidden";
document.getElementById("homerun").style.visibility = "visible";
} else if (cycle < 275) {
sizeSign(_heightsize.shift(), _widthsize.shift());
} else if (cycle === 275) {
clearInterval(timer);
}
cycle++;
}
function batterup() {
if (timer) clearInterval(timer);
_leftball = leftball.slice(0);
_topball = topball.slice(0);
_heightsize = heightsize.slice(0);
_widthsize = widthsize.slice(0);
timer = setInterval(runIt, 50);
}
//////////////////////////////END////////////////////////////////
</script>
</head>
<body>
<input type="button" id="button1" value="Batter Up!" onclick="batterup()" />
<img src="http://lorempixel.com/sports/50/50/" alt="ballfield" id="ballfield" />
<img src="http://lorempixel.com/sports/50/50/" alt="baseball" id="ball" />
<img src="http://lorempixel.com/sports/50/50/" alt="home run" id="homerun" />
</body>
</html>
I am working with this map where I am trying to get the id numbers from the world-110m.json file to be displayed in the circles of the dorling map. The structure of the json file looks like this:
{
"type": "Topology",
"transform": {
"scale": [0.0036000360003600037, 0.0016925586033320111],
"translate": [ - 180, - 85.60903777459777]
},
"objects": {
"land": {
"type": "MultiPolygon",
"arcs": [[[0]], [[1]], [[2]], [[3]], [[4]], [[5]], [[6]], [[7, 8, 9]], [[10, 11]], [[12]], [[13]], [[14]], [[15]], [[16]], [[17]], [[18]], [[19]], [[20]], [[21]], [[22]], [[23]], [[24]], [[25]], [[26]], [[27]], [[28]], [[29, 30]], [[31]], [[32]], [[33]], [[34]], [[35]], [[36]], [[37]], [[38]], [[39]], [[40]], [[41]], [[42, 43]], [[44]], [[45]], [[46]], [[47, 48, 49, 50]], [[51]], [[52]], [[53]], [[54]], [[55]], [[56]], [[57]], [[58]], [[59]], [[60]], [[61]], [[62, 63]], [[64]], [[65]], [[66]], [[67]], [[68]], [[69]], [[70]], [[71]], [[72]], [[73]], [[74]], [[75]], [[76, 77]], [[78]], [[79]], [[80]], [[81]], [[82]], [[83]], [[84]], [[85]], [[86]], [[87]], [[88]], [[89]], [[90, 91]], [[92]], [[93]], [[94]], [[95]], [[96]], [[97]], [[98]], [[99]], [[100]], [[101]], [[102]], [[103]], [[104]], [[105]], [[106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221]], [[222, 223]], [[224]], [[225]], [[226]], [[227]], [[228]], [[229]], [[230, 231, 232, 233]], [[234]], [[235]], [[236]], [[237]], [[238]], [[239]], [[240]], [[241]], [[242, 243, 244, 245, 246, 247, 248, 249, 250, 251, 252, 253, 254, 255, 256, 257, 258, 259, 260, 261, 262, 263, 264, 265, 266, 267, 268, 269, 270, 271, 272, 273, 274, 275, 276, 277, 278, 279, 280, 281, 282, 283, 284, 285, 286, 287, 288, 289, 290, 291, 292, 293, 294, 295, 296, 297, 298, 299, 300, 301, 302, 303, 304, 305, 306, 307, 308, 309, 310, 311, 312, 313, 314, 315, 316, 317, 318, 319, 320, 321, 322, 323, 324, 325, 326, 327, 328, 329, 330, 331, 332, 333, 334, 335, 336, 337, 338, 339, 340, 341, 342, 343, 344, 345, 346, 347, 348, 349, 350, 351, 352, 353, 354, 355, 356, 357, 358, 359, 360, 361, 362, 363, 364, 365, 366, 367, 368, 369, 370, 371, 372, 373, 374, 375, 376, 377, 378, 379, 380, 381, 382, 383, 384, 385, 386, 387, 388, 389, 390, 391, 392, 393, 394, 395, 396, 397, 398, 399, 400, 401, 402, 403, 404, 405, 406, 407, 408, 409, 410, 411, 412, 413, 414, 415, 416, 417, 418, 419, 420, 421, 422, 423, 424, 425, 426, 427, 428, 429, 430, 431, 432, 433, 434, 435, 436, 437, 438, 439, 440, 441, 442, 443, 444, 445, 446, 447, 448, 449, 450, 451, 452, 453, 454, 455, 456, 457, 458, 459, 460, 461, 462, 463, 464, 465, 466, 467, 468, 469, 470, 471, 472, 473, 474, 475, 476, 477], [478, 479, 480, 481, 482, 483, 484]], [[485]], [[486]], [[487]], [[488]], [[489]], [[490]], [[491]], [[492]], [[493]], [[494]], [[495]], [[496]], [[497]], [[498]]]
},
"countries": {
"type": "GeometryCollection",
"geometries": [{
"type": "Polygon",
"arcs": [[499, 500, 501, 502, 503, 504]],
"id": 4
}, {
"type": "MultiPolygon",
"arcs": [[[505, 506, 352, 507]], [[354, 508, 509]]],
"id": 24
}, {
"type": "Polygon",
"arcs": [[510, 511, 414, 512, 513, 514]],
"id": 8
}, {
"type": "Polygon",
"arcs": [[312, 515, 314, 516, 517]],
"id": 784
}, {
"type": "MultiPolygon",
"arcs": [[[518, 11]], [[519, 520, 521, 166, 522, 168, 523, 524]]],
"id": 32
}, {
"type": "Polygon",
"arcs": [[525, 526, 527, 528, 529]],
"id": 51
}, {
"type": "MultiPolygon",
"arcs": [[[0]], [[1]], [[2]], [[3]], [[4]], [[5]], [[6]], [[530, 531]]],
"id": 10
}, {
"type": "Polygon",
"arcs": [[13]],
"id": 260
}, {
"type": "MultiPolygon",
"arcs": [[[14]], [[24]]],
"id": 36
}, {
"type": "Polygon",
"arcs": [[532, 533, 534, 535, 536, 537, 538]],
"id": 40
}, etc.
I know that I can access the id like that:
var nbr = "unknown";
try {
nbr = land.geometries[parseInt(d.id)-1].parent.id;
} catch(e) {
console.log("no nbr found for "+d.id);
}
And then return it with all the other variables taken from the world-110m.jsonfile:
return {
nbr:nbr,
x: centroid[0],
y: centroid[1],
ox: centroid[0],
oy: centroid[1],
geometry: d.geometry,
dorling: dorling(d.geometry)
};
But now I don't understand how I can access this variable and draw it into the circles of the dorling map (preferably, only when the circles have a big enough size to "carry" the id number). I have seen this question and this post about how to add country names to a d3 map, but I don't understand how to do this with the map I'm working with. Everything I have tried so far did not work. Could anyone please help me with this? I have added the html file with my additions to this pen. I am sorry it doesn't display anything (I didn't know how to add the required json files to the pen; I simply downloaded them from the source of the map I'm working with and ran everything locally).
Duh, silly me, I forgot to add a svg text element. The below code did it:
svg.selectAll("text")
.data(nodes).enter()
.append("text")
.attr("x", function (d) { return d.x; })
.attr("y", function (d) { return d.y; })
.text(function (d) { return d.nbr; });
The display doesn't look very nice yet, though, but that's going to be another problem...
I created a small bot that I intended to loop on all that are listed on the list and scrape data from a it that is on the other page. So I just utilize iframe so I can override and grab data from it.
the problem with my script is it's returning duplicate records in my console.log. What It supposed to do is to grab a data from another page and store it on the parent page. For now I just use console.log to see what it's returning. And then may be later I'll be storing them on a <textarea> so I can easily copy it or store it on a file.
<html>
<head>
<title>While Looping</title>
<script type="text/javascript">
var list = [ 644, 464, 441, 442, 552, 444, 594, 487, 430, 545, 524, 500, 450, 626, 505, 466, 456, 418, 560, 507, 535, 417, 462, 424, 551, 590, 453, 595, 593, 423, 495, 484, 536, 421, 518, 563, 515, 556, 532, 488, 465, 600, 597, 498, 534, 513, 514, 530, 519, 443, 596, 631, 533, 422, 437, 576, 504, 502, 361, 448, 598, 544, 416, 617, 537, 477, 447, 539, 614, 557, 445, 630, 588, 632, 476, 439, 574, 523, 636, 461, 558, 359, 499, 440, 481, 643, 460, 470, 569, 425, 573, 620, 615, 475, 468, 543, 599, 612, 613, 452, 582, 618, 455, 525, 438, 471, 628, 511, 562, 564, 565, 566, 605, 467, 463, 529, 561, 436, 527, 547, 623, 606, 486, 482, 555, 446, 559, 548, 549, 550, 607, 405, 540, 469, 474, 629, 611, 426, 639, 493, 602, 349, 604, 622, 546, 492, 494, 567, 407, 420, 399, 496, 531, 491, 520, 521, 404, 586, 459, 479, 637, 570, 634, 608, 584, 638, 601, 508, 516, 480, 571, 610, 621, 512, 483, 587, 592, 627, 642, 589, 428, 403, 541, 542, 625, 517, 522, 432, 497, 526, 644, 464, 441, 442, 552, 444, 594, 487, 430, 545, 524, 500, 450, 626, 505, 466, 456, 418, 560, 507, 535, 417, 462, 424, 551, 590, 453, 595, 593, 423, 495, 484, 536, 421, 518, 563, 515, 556, 532, 488, 465, 600, 597, 498, 534, 513, 514, 530, 519, 443, 596, 631, 533, 422, 437, 576, 504, 502, 361, 448, 598, 544, 416, 617, 537, 477, 447, 539, 614, 557, 445, 630, 588, 632, 476, 439, 574, 523, 636, 461, 558, 359, 499, 440, 481, 643, 460, 470, 569, 425, 573, 620, 615, 475, 468, 543, 599, 612, 613, 452, 582, 618, 455, 525, 438, 471, 628, 511, 562, 564, 565, 566, 605, 467, 463, 529, 561, 436, 527, 547, 623, 606, 486, 482, 555, 446, 559, 548, 549, 550, 607, 405, 540, 469, 474, 629, 611, 426, 639, 493, 602, 349, 604, 622, 546, 492, 494, 567, 407, 420, 399, 496, 531, 491, 520, 521, 404, 586, 459, 479, 637, 570, 634, 608, 584, 638, 601, 508, 516, 480, 571, 610, 621, 512, 483, 587, 592, 627, 642, 589, 428, 403, 541, 542, 625, 517, 522, 432, 497, 526, 616, 575, 585, 509, 554, 506, 454, 501, 431, 434, 603, 640, 641, 489, 451, 472, 510, 490, 473, 458, 457, 609, 568, 478, 619, 553, 538, 427, 635, 624, 583, 591, 572, 633, 429, 419, 503, 485, 435, 433, 528, 449, 340, 616, 575, 585, 509, 554, 506, 454, 501, 431, 434, 603, 640, 641, 489, 451, 472, 510, 490, 473, 458, 457, 609, 568, 478, 619, 553, 538, 427, 635, 624, 583, 591, 572, 633, 429, 419, 503, 485, 435, 433, 528, 449, 340 ];
var count = 0;
var total_list = list.length;
var page_id;
var base_url = "http://somewebsite.com/iframe_path";
var iframe_url = base_url + page_id;
function load_data() {
$("#iframe").load(function() {
var acc_name = $("#iframe").contents().find("#text_name").attr("value");
var acc_add = $("#iframe").contents().find("#text'_address").attr("value");
setTimeout(nextFrame, 1000);
console.log( list[count] + ' ' + acc_name + ' ' + acc_add );
});
$("h1").text(count);
} //load data
// loop records
function nextFrame() {
if(count != total_list) {
var iframe_url = base_url+list[count];
$("#iframe").attr('src',iframe_url);
console.log(iframe_url);
load_data();
count++;
//Continue the loop in 3s
//setTimeout(nextFrame, 1000);
}
}
// Start the loop
setTimeout(nextFrame, 0);
</script>
</head>
<body>
<h1>0</h1> <br />
<iframe width="400" height="400" id="iframe"></iframe>
</body>
</html>
Why are you re-binding "onload" for the iframe? Everytime you call load_data(), it binds another event to the iframe to run the specified function when it loads. Try something like this:
var list = [ 644, 464, 441, 442 ];
var count = 0;
var total_list = list.length;
var page_id;
var base_url = "http://somewebsite.com/iframe_path";
var iframe_url = base_url + page_id;
$(document).ready(function () {
$("#iframe").load(function() {
var acc_name = $("#iframe").contents().find("#text_name").attr("value");
var acc_add = $("#iframe").contents().find("#text'_address").attr("value");
console.log( list[count] + ' ' + acc_name + ' ' + acc_add );
setTimeout(nextFrame, 1000);
});
});
// loop records
function nextFrame() {
if(count != total_list) {
var iframe_url = base_url+list[count];
$("#iframe").attr('src',iframe_url);
console.log(iframe_url);
count++;
}
}