javascript - Place text/image on svg path centroid using D3 -

-

ive looked , read suck in, im still having trouble centroid. similar question of mine, more precise.

i need put text / image on centroid of these regions: enter image description here

the svg data in html file in format this: enter image description here

so need select path, , use centroid function on d attribute, , place dot/text/image etc.

ive attached jsfiddle see regions, dont mind class´s/id´s.

<svg id="gamemap">         <g>             <path id='1613' class='faction2' d='m541.02,336.29l541.71,336.09l543.77,338.27l543.53,338.58l545.92,338.99l546.76,340.12l548.44,340.06l548.55,341.76l549.62,342.38l549.24,343.35l550.58,344.54l551.35,344.98l553.38,344.66l554.17,345.63l555.37,345.08l556.2,346.28l556.8,345.6l557.82,347.73l558.51,347.76l558.17,350.15l560.8,350.12l561.12,349.61l563.89,349.94l562.98,351.84l562.99,353.94l562.06,353.97l560.77,357.72l561.33,357.73l562.06,359l563.49,358.5l563.75,357.85l564.17,358.09l564.64,361.19l565.52,361.68l564.51,362.21l564.67,363.38l565.17,363.21l565.35,364.41l566.19,364.53l566.23,365.29l569.63,364.91l570.56,365.3l571.08,364.96l570.95,363.35l571.8,363.24l572.34,361.72l574.42,361.71l574.42,362.52l575.54,363.71l576.52,363.63l577.12,366.98l576.92,367.48l576.48,367.11l576.07,368.69l575.27,369.28l574.63,368.34l573.95,368.48l572.81,367.73l572.98,367.22l568.79,367.27l569.11,368.9l570.26,368.96l570.47,370.97l569.84,371.57l569.93,372.77l567.97,373.13l567.87,374.18l566.53,374.8l566.23,376.97l567.97,378.31l567.71,378.99l568.26,379.8l569.51,379.48l570.12,379.99l569.89,381.28l570.75,381.42l571.35,380.69l571.68,381.56l572.49,381.6l572.58,384.48l570.45,386.31l571.53,387.37l575.34,387.32l576.48,386.31l577.75,387.06l578.55,386.9l578.72,386.35l579.14,388.12l582.26,388.74l582.26,388.74l581.47,393.15l580.4,393.97l579.82,395.87l579.08,395.35l578.2,396.29l577.28,396.38l577.29,397.52l578.35,397.61l579.28,399.98l577.41,400.34l577.11,401.08l574.8,400.87l573.67,400.08l572.75,400.72l573.27,402.26l572.33,403.02l572.9,403.12l572.9,406.09l571.14,407.62l570.94,409.22l568.54,410.96l567.72,412.46l566.65,412.91l565.57,412.67l565.46,413.7l564.67,413.56l564.03,414.13l564.03,414.13l563.23,413.7l563.3,412.5l561.74,411.47l557.87,411.88l557.23,410.94l555.76,411.18l555.63,410.36l554.66,409.87l554.24,407.54l553.46,408.06l553.18,407.52l552.19,407.79l552.13,406.67l551.61,406.4l549.85,407.78l550.64,408.52l550.35,409.52l548.88,409.93l546.92,411.56l545.91,411.15l545.41,411.64l544.54,410.6l544.91,410.04l544.56,409.77l546.56,408.07l547.67,406.07l544.73,404.27l543.76,404.56l543.09,406.83l542.24,406.82l539.6,408.5l538.88,407.79l538,407.92l538,407.92l537.23,405.88l537.12,402.37l536.06,401.04l535.09,400.83l534.83,399.78l535.59,399.16l534.97,398.75l535.21,397.8l533.26,395.38l533.52,394.35l534.62,394.05l534.62,392.72l537.23,391.28l536.87,390.53l535.54,390.11l534.7,388.6l533.39,389.1l531.94,387.66l530.97,388.6l530.32,387.03l529.52,386.78l528.33,384.83l528.33,384.83l528.41,383.41l529.8,381.78l529.94,380.84l532.2,379.27l533.94,379.57l535.17,379.04l535.49,373.58l534.78,368.75l534.3,368.46l535.34,367.54l533.5,369.09l533.31,368.51l533.16,368.93l532.38,368.65l532,369.91l530.61,370.02l528.8,367.47l527.48,367.8l527.47,367.3l526.14,367.25l526.14,363.27l522.15,361.35l522.76,360.8l522.44,359.18l522.85,358.72l524.05,359.8l525.49,359.83l527.33,359.09l528.25,356.19l527.62,355.4l528.01,353.55l528.68,353.53l528.87,352.71l531.71,352.3l530.81,349.43l531.44,349.31l531.64,347.98l530.57,347.83l531.23,345.53l531.87,345.02l533.86,344.93l534.43,345.96l534.87,345.52l535.88,345.99l536.09,347.44l537.04,348.1l537.23,349.32l538.33,350.45l541.8,348.99l541.87,348.25l543.42,347.42l544.39,347.69l544.48,346.42l542.96,344.27l543.61,341.8l540.93,341.91l540.88,341.21l538.99,340.21l538.31,338.99l538.71,337.22l538.71,337.22l539.3,337.63z'/><path id='1614' class='faction2' d='m546.46,257.82l545.19,257.69l545.32,258.18l543.54,257.65l541.38,259.38l542.02,260.56l540.61,260.4l538.66,258.32l536.13,258.13l535.82,258.52l535.34,258.01l533.87,259.42l533.2,259.42l532.34,257.98l530.81,258.02l529.74,257.1l529.84,255.69l529,255.13l530.84,254.47l530.2,254l530.15,252.87l528.99,252.2l529.29,251l531.38,249.47l533.13,249.19l533.53,248.49l534.28,249.13l534.78,247.81l535.79,247.12l535.17,245.59l533.4,244.1l533.46,243.33l532.94,243.15l533.23,242.5l535.15,241.24l536.1,241.87l537.59,241.28l539.29,238.42l540,238.94l541.47,238.45l542.04,238.74l540.53,236.05l542.23,236.64l541.97,235.28l543.78,235.25l544.4,233.9l545.04,234.33l544.79,235.26l545.4,236.52l547.05,237.66l548.92,239.98l550.77,239.84l552.86,240.63l555.26,240.44l555.25,240.92l554.36,240.98l554.53,241.89l552.78,241.9l551.46,243.23l551.74,245.25l553.79,247.69l553.79,247.69l553.79,248.62l551.45,250.07l551.45,250.07l548.96,250.95l546.19,250.97l546.21,253.02l547.91,253.88l548.31,254.99l547.66,256.41l547.66,256.41z'/></g>     </svg>

jsfiddle

hope solution this. thanks


Comments

Post a Comment

Popular posts from this blog

google chrome - Developer tools - How to inspect the elements which are added momentarily (by JQuery)? -

-
i looking @ how website designed using inspector in chrome. can use firefox developer tools or firefox web developer add-on or chrome web developer extension. so website has slide-show , using jquery it. looking @ markup , css in inspector, i see 2 things constantly changing slides change: one opacity css property understandable, i'd see changing values, changes fast see read anything. second- a div added in div slides change momentarily , moment when appears short notice except div . so question is there way stop slideshow can temporarily rid of blinking sort of effect (by speedy adding , removal , changing of elements , values)? where can inspect div element gets added such short moment , , gets removed? , can see changes in value of opacity takes place? is there way stop slideshow can temporarily rid of blinking sort of effect (by speedy adding , removal , changing of elements , values)? if opacity animated css transition or animation,
Read more

angularjs - Showing an empty as first option in select tag -

-
my app showing empty select field first entry. have read other solution given , tried still not working. my controller code is: .controller('usercreatecontroller', function(user,profile,auth) { alert("hello"); var vm = this; vm.type = 'create'; profile.all() //this service fetch profiles shown in select field .success(function(data){ vm.profile = data; }); vm.userdata.profile = vm.profile[0]; //here have set default value select field and html page is: <label class="col-sm-2 control-label">profile</label> <div class="col-sm-8"> <select ng-model="user.userdata.profile" ng-options="person._id person.profilename person in user.profile"> </select> </div> hierarchy of vm.profile { "_id": 46, "profile": objectid("5516498e95b84548156db754"), "isactive": true, "password": "$2
Read more

php - Cloud9 cloud IDE and CakePHP -

-
i attempting cakephp running on cloud9, cloud based ide. unaware, cloud collaboration ide intermixes services such bitbucket. site gives sudo rights, , installed cakephp using these instructions: https://www.digitalocean.com/community/tutorials/how-to-install-cakephp-on-an-ubuntu-12-04-vps when attempt run database exported machine cakephp installed, error message "url rewriting not configured on server." attempted solve issue using official guide cakephp: http://book.cakephp.org/2.0/en/installation/url-rewriting.html but no cigar, same error message. has gotten cakephp working, or aware of cloud ide free/low cost cloud9 support cakephp? here's how got working now: sudo apt-get update sudo apt-get install php5-intl curl -ss https://getcomposer.org/installer | php -- --filename=composer ./composer create-project --prefer-dist cakephp/app this creates project in /app default. move workspace docroot: mv app/* ./ mv app/.* ./ rm -rf app then de
Read more