CAMP/radiaSVG
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added ids to elements, some console.log testing to identify elements on mouse-over

Browse Source
This commit is contained in:
Sanj 2011-06-26 02:49:04 +05:30
parent 93e28f3d60
commit cf030b62c7
2 changed files with 39 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
index.html
View File

@ -21,19 +21,19 @@
<text style="fill: #000000;text-anchor:start;font-size:12.8px;font-family:sans-serif;font-style:normal;font-weight:normal" x="570.616" y="237">
<tspan x="570.616" y="237"></tspan>
</text>
<g>
<g id="pbox">
<rect style="fill: #ffffff" x="737.322" y="437.5" width="113.443" height="35" rx="10" ry="10"/>
<rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke-linejoin: round; stroke: #1c5a1c" x="737.322" y="437.5" width="113.443" height="35" rx="10" ry="10"/>
</g>
<g>
<g id="cbox">
<rect style="fill: #ffffff" x="427.738" y="442.5" width="112" height="35" rx="10" ry="10"/>
<rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke-linejoin: round; stroke: #0000ff" x="427.738" y="442.5" width="112" height="35" rx="10" ry="10"/>
</g>
<g>
<g id="jbox">
<rect style="fill: #ffffff" x="592.766" y="346" width="97" height="36" rx="10" ry="10"/>
<rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke-linejoin: round; stroke: #ff0000" x="592.766" y="346" width="97" height="36" rx="10" ry="10"/>
</g>
<g>
<g id="vbox">
<rect style="fill: #ffffff" x="586.808" y="527.05" width="114.213" height="39.1997" rx="10" ry="10"/>
<rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke-linejoin: round; stroke: #861dc8" x="586.808" y="527.05" width="114.213" height="39.1997" rx="10" ry="10"/>
</g>
@ -57,7 +57,7 @@
<tspan x="254.388" y="427.708">Content</tspan>
</text>
</g>
<g>
<g id="rbox">
<polygon style="fill: #000000" points="630.388,430.5 641.624,388.53 651.388,430.5 732.616,457.25 681.352,458.29 660.846,480.212 642.33,520.228 623.368,479.504 600.034,458.29 545.588,456.876 "/>
<polygon style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #861dc8" points="630.388,430.5 641.624,388.53 651.388,430.5 732.616,457.25 681.352,458.29 660.846,480.212 642.33,520.228 623.368,479.504 600.034,458.29 545.588,456.876 "/>
</g>
@ -96,7 +96,7 @@
<text style="fill: #000000;text-anchor:start;font-size:12.8px;font-family:sans-serif;font-style:normal;font-weight:normal" x="640.888" y="319.758">
<tspan x="640.888" y="319.758"></tspan>
</text>
<g>
<g id="rajakani">
<path style="fill: none; fill-opacity:0; stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 4; stroke: #000000" d="M 792.766,574.431 A 51.1146,51.1146 0 0 0 843.881,625.546"/>
<line style="fill: none; fill-opacity:0; stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 4; stroke: #000000" x1="792.766" y1="480.972" x2="792.766" y2="574.431"/>
<path style="fill: none; fill-opacity:0; stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 4; stroke: #000000" d="M 960.834,644.059 A 18.5134,18.5134 0 0 0 942.321,625.546"/>
@ -105,12 +105,12 @@
<polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="795.766,484.736 792.766,478.736 789.766,484.736 "/>
<polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="956.834,672.146 960.834,680.146 964.834,672.146 "/>
</g>
<g>
<g id="rajaspec">
<line style="fill: none; fill-opacity:0; stroke-width: 2; stroke-dasharray: 20 4 4 4 4 4; stroke: #000000" x1="772.778" y1="549.889" x2="568.998" y2="698.861"/>
<polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="771.51,554.532 774.583,548.57 767.969,549.689 "/>
<polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="570.266,694.218 567.193,700.18 573.807,699.061 "/>
</g>
<g>
<g id="dmkcong">
<path style="fill: none; fill-opacity:0; stroke-width: 2; stroke-dasharray: 4; stroke: #000000" d="M 1021.47,691.044 A 269.538,269.538 0 0 0 990.511,214.791"/>
<polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="1023.21,686.581 1019.56,692.21 1026.25,691.752 "/>
<polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="997.396,213.332 988.469,213.882 994.265,220.694 "/>
@ -118,44 +118,44 @@
<text style="fill: #000000;text-anchor:start;font-size:12.8px;font-family:sans-serif;font-style:normal;font-weight:normal" x="394.618" y="505.25">
<tspan x="394.618" y="505.25"></tspan>
</text>
<g>
<g id="gascorp">
<path style="fill: none; fill-opacity:0; stroke-width: 2; stroke-dasharray: 4; stroke: #000000" d="M 423.274,459.758 A 135.656,135.656 0 0 0 282.766,603.608"/>
<polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="419.311,462.411 425.508,459.842 419.734,456.426 "/>
<path style="fill: #000000" d="M 282.766 603.608 C 281.768,603.669 280.709,602.732 280.648,601.734 C 280.586,600.736 281.523,599.677 282.522,599.615 C 283.52,599.554 284.579,600.491 284.64,601.49 C 284.701,602.488 283.764,603.547 282.766,603.608z"/>
<path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 282.766 603.608 C 281.768,603.669 280.709,602.732 280.648,601.734 C 280.586,600.736 281.523,599.677 282.522,599.615 C 283.52,599.554 284.579,600.491 284.64,601.49 C 284.701,602.488 283.764,603.547 282.766,603.608"/>
</g>
<g>
<g id="journosunil">
<path style="fill: none; fill-opacity:0; stroke-width: 2; stroke-dasharray: 4; stroke: #000000" d="M 586.458,354.571 A 299.608,299.608 0 0 0 150.82,295.382"/>
<polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="151.728,290.634 149.094,296.803 155.61,295.209 "/>
<polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="581.888,353.126 587.743,356.401 586.85,349.752 "/>
</g>
<g>
<g id="ambajourno">
<path style="fill: none; fill-opacity:0; stroke-width: 2; stroke-dasharray: 4; stroke: #000000" d="M 598.845,417.931 A 201.885,201.885 0 1 0 216.914,547.116"/>
<polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="595.054,415.014 599.446,420.084 600.867,413.528 "/>
<polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="210.932,543.395 217.743,549.192 218.294,540.265 "/>
</g>
<g>
<g id="tatabox">
<ellipse style="fill: #fff5e8" cx="296.116" cy="222.75" rx="38.7285" ry="16.5"/>
<ellipse style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" cx="296.116" cy="222.75" rx="38.7285" ry="16.5"/>
</g>
<g>
<g id="relbox">
<ellipse style="fill: #f5ca9c" cx="318.618" cy="699.25" rx="42" ry="15.5"/>
<ellipse style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" cx="318.618" cy="699.25" rx="42" ry="15.5"/>
</g>
<g>
<g id="conbox">
<ellipse style="fill: #e8fedc" cx="926.717" cy="213.007" rx="59.6935" ry="21.6242"/>
<ellipse style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" cx="926.717" cy="213.007" rx="59.6935" ry="21.6242"/>
</g>
<g>
<g id="dmkbox">
<ellipse style="fill: #ffffbe" cx="984.36" cy="693.344" rx="33.2715" ry="15.5"/>
<ellipse style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" cx="984.36" cy="693.344" rx="33.2715" ry="15.5"/>
</g>
<g>
<g id="gasjourno">
<path style="fill: none; fill-opacity:0; stroke-width: 2; stroke-dasharray: 4; stroke: #000000" d="M 621.067,339.096 A 225.94,225.94 0 0 0 292.409,625.24"/>
<polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="616.289,339.379 622.929,340.334 619.708,334.449 "/>
<polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="286.198,621.922 293.379,627.255 293.337,618.311 "/>
</g>
<g>
<g id="relkids">
<path style="fill: none; fill-opacity:0; stroke-width: 2; stroke-dasharray: 4; stroke: #000000" d="M 220.823,572.907 A 77.0866,77.0866 0 0 0 268.996,690.689"/>
<polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="264.79,693.204 271.178,691.158 265.708,687.274 "/>
<polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="220.831,577.866 222.052,571.043 215.861,574.161 "/>
@ -172,7 +172,7 @@
<tspan x="511.766" y="268.025">Rashmi</tspan>
</text>
</g>
<g>
<g id="jcong">
<path style="fill: none; fill-opacity:0; stroke-width: 2; stroke-dasharray: 4; stroke: #000000" d="M 690.898,350.797 A 163.395,163.395 0 0 0 916.715,236.629"/>
<polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="919.011,240.904 917.196,234.446 913.119,239.773 "/>
<polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="697.797,349.723 688.854,349.89 694.354,356.944 "/>
@ -195,7 +195,7 @@
<tspan x="934.762" y="619.975">Kanimozhi</tspan>
</text>
</g>
<g>
<g id="nitav">
<path style="fill: none; fill-opacity:0; stroke-width: 2; stroke-dasharray: 4; stroke: #000000" d="M 453.27,581.608 A 98.9704,98.9704 0 0 0 641.339,571.594"/>
<polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="457.21,584.27 452.47,579.522 451.516,586.162 "/>
<polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="643.566,575.936 641.912,569.435 637.704,574.659 "/>
@ -242,7 +242,7 @@
<tspan x="310.254" y="562.2">K.R. Raja</tspan>
</text>
</g>
<image x="806.388" y="630.25" width="25" height="25" xlink:href="black_heart.png"/>
<image id="heartpng" x="806.388" y="630.25" width="25" height="25" xlink:href="black_heart.png"/>
<text style="fill: #0000ff;text-anchor:middle;font-size:16.1883px;font-family:sans-serif;font-style:normal;font-weight:normal" x="296.116" y="228.35">
<tspan x="296.116" y="228.35">TATA</tspan>
</text>
@ -292,7 +292,7 @@
<tspan x="304.388" y="199.275">Ratan Tata</tspan>
</text>
</g>
<g>
<g id="airline">
<path style="fill: none; fill-opacity:0; stroke-width: 2; stroke-dasharray: 4; stroke: #000000" d="M 344.752 190.221 C 551,85.25 642,309.25 731.764,264.495"/>
<polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="346.745,185.841 342.759,191.236 349.467,191.188 "/>
<polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="729.734,268.86 733.765,263.498 727.057,263.49 "/>
@ -321,7 +321,7 @@
<tspan x="598.388" y="217.1">Upender</tspan>
</text>
</g>
<g>
<g id="gasvir">
<path style="fill: none; fill-opacity:0; stroke-width: 2; stroke-dasharray: 4; stroke: #000000" d="M 814.206,336.902 A 232.68,232.68 0 0 0 571.388,315.25"/>
<path style="fill: #000000" d="M 571.388 315.25 C 570.942,314.355 571.391,313.014 572.286,312.568 C 573.181,312.122 574.522,312.571 574.968,313.465 C 575.414,314.36 574.965,315.702 574.07,316.148 C 573.175,316.594 571.834,316.145 571.388,315.25z"/>
<path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 571.388 315.25 C 570.942,314.355 571.391,313.014 572.286,312.568 C 573.181,312.122 574.522,312.571 574.968,313.465 C 575.414,314.36 574.965,315.702 574.07,316.148 C 573.175,316.594 571.834,316.145 571.388,315.25"/>
@ -346,7 +346,7 @@
<text style="fill: #ab730c;text-anchor:middle;font-size:13.5467px;font-family:sans-serif;font-style:normal;font-weight:normal" x="440.388" y="693.2">
<tspan x="440.388" y="693.2">Iron Ore</tspan>
</text>
<path style="fill: none; fill-opacity:0; stroke-width: 1.8; stroke-dasharray: 20 8 4 8; stroke: #000000" d="M 788.766 551.5 C 763,594.25 806,698.25 926,627.25"/>
<path id="loveline" style="fill: none; fill-opacity:0; stroke-width: 1.8; stroke-dasharray: 20 8 4 8; stroke: #000000" d="M 788.766 551.5 C 763,594.25 806,698.25 926,627.25"/>
<g>
<rect style="fill: #ffffff" x="376.491" y="228" width="110.55" height="13"/>
<text style="fill: #0000ff;text-anchor:middle;font-size:11.1083px;font-family:sans-serif;font-style:normal;font-weight:normal" x="431.766" y="238.35">
@ -359,7 +359,7 @@
<tspan x="1016.93" y="649.071">Rajathi Ammal</tspan>
</text>
</g>
<g>
<g id="polcab">
<path style="fill: none; fill-opacity:0; stroke-width: 2; stroke-dasharray: 4; stroke: #000000" d="M 831.737,479.512 A 119.185,119.185 0 0 0 1050.39,463.753"/>
<polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="835.976,481.686 830.714,477.525 830.543,484.231 "/>
<polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="1052.25,468.252 1051.12,461.64 1046.51,466.513 "/>
@ -382,7 +382,7 @@
<tspan x="898.766" y="540.225">R.K.Chandolia</tspan>
</text>
</g>
<g>
<g id="paakani">
<path style="fill: none; fill-opacity:0; stroke-width: 2; stroke-dasharray: 4; stroke: #000000" d="M 973.078,615.242 A 51.9744,51.9744 0 0 0 989.766,542.858"/>
<polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="975.209,611.042 971.176,616.403 977.885,616.412 "/>
</g>

14
radia.js
View File

@ -14,6 +14,20 @@ $(function() {
$.getJSON("radia.json", {}, function(data) {
var R = data;
var $texts = [];
$('g').each(function() {
// console.log("hi");
if (typeof($(this).attr("id")) === 'undefined') {
return;
}
$(this).click(function() {
console.log($(this).attr("id"));
});
$(this).mouseover(function() {
console.log($(this).attr("id"));
});
});
$('text').each(function() {
$(this).css({'cursor': 'pointer'});
var $tspan = $(this).children('tspan').eq(0);