how to toggle the position of the parent in d3

Aug 03, 2017 05:06:17

In Rotating Cluster Layout,i want to place the parent word at the center(ABOVE THE NODE CIRCLE) on click..
The PROBLEM is on node close ,the position of the parent word remains same.How should i overcome this issue?
(already asked in other site,i didn't get proper response there..thats why i am posting it here...
https://stackoverflow.com/questions/45476504/selecting-the-parent-text-in-d3 )

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
   <style>
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.node text {
font-size: 120%;
}
}
   
div#tooltip {
  position: absolute;
display:inline-block;
   background: orange;
    border-radius: 8px;
padding-left: 5px;
padding-right: 5px;
  pointer-events: none;
}
.node {
   cursor: pointer;
}
.node circle {
   fill: #fff;
   stroke: steelblue;
   stroke-width: 1.5px;
}
.node text {
    font: sans-serif;
text-align: center;
}
.link {
   fill: none;  
}
.parent{
fill :red;
}
#myTable,#myTable1
{
border-radius:9px;
position:absolute;
          top:50%;
          left:40%;
border: 2 px solid red;
margin:auto;
}
#buttn,#buttn1
{
   -moz-box-shadow:inset 0px 1px 0px 0px #fbafe3;
   -webkit-box-shadow:inset 0px 1px 0px 0px #fbafe3;
   box-shadow:inset 0px 1px 0px 0px #fbafe3;
   background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5bb0), color-stop(1, #ef027d) );
   background:-moz-linear-gradient( center top, #ff5bb0 5%, #ef027d 100% );
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bb0', endColorstr='#ef027d');
   background-color:#ff5bb0;
margin-left:40%;
   border-radius:9px;
   -webkit-border-radius:9px;
   -moz-border-border-radius:9px;
   border:1px solid #ee1eb5;
   display:inline-block;
   color:#ffffff;
   font-family:Arial;
   font-size:15px;
   font-weight:bold;
   font-style:normal;
   height: 25px;
   line-height: 20px;
   width:50px;
   text-decoration:none;
   text-align:center;
   text-shadow:1px 1px 0px #c70067;
}
#load{
position:absolute;
margin-bottom:5%;
margin-left: 30%;
margin-right: 10%;
}
#update{
margin-left: 2%;
border-radius:15px;
padding:1px;
width:50px;
   -moz-box-shadow:inset 0px 1px 0px 0px #fbafe3;
   -webkit-box-shadow:inset 0px 1px 0px 0px #fbafe3;
   box-shadow:inset 0px 1px 0px 0px #fbafe3;
   background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5bb0), color-stop(1, #ef027d) );
   background:-moz-linear-gradient( center top, #ff5bb0 5%, #ef027d 100% );
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bb0', endColorstr='#ef027d');
   background-color:#ff5bb0;
   border-radius:9px;
   -webkit-border-radius:9px;
   -moz-border-border-radius:9px;
   border:1px solid #ee1eb5;
   display:inline-block;
   color:#ffffff;
   font-family:Arial;
   font-size:15px;
   font-weight:bold;
   font-style:normal;
   height: 25px;
   line-height: 20px;
   width:50px;
   text-decoration:none;
   text-align:center;
   text-shadow:1px 1px 0px #c70067;
}
#myTable,#myTable1, #myTr1,#myTr {
 
   background-color:pink;
  padding-top: 10px;
   padding-right: 30px;
   padding-bottom: 10px;
   padding-left: 30px;
}
a{
font-weight:bold;
}
#keyy{
margin-left: 1%;
}
.ui-autocomplete{
max-height:100 px;
overflow y:auto;
overflow x:hidden;
padding-right:20 px;
}
#editor {
   background: white;
   border: 1px solid #ffa853;
   border-radius: 5px;
   box-shadow: 0 0 2px 2px #ffa853;
   color: #666;
   outline: none;
   height:20px;
   width: 190px;
 }
 .ui-autocomplete {
height:300px;
position:absolute;
overflow-x:hidden;
overflow-y:scroll;
}
ul.ui-autocomplete {
border-radius:15px;
}
a{
color:blue;
}
</style>
 
</head>
<body bgcolor="#FFFFE0">
<div class="container">
<div id="tree-container"class="full" bgcolor="#FFFFE0"></div>
<script>
var data={
 "name": "அகடம்",
 "tooltip": "",
 "color": "#FF0000",
 "children": [
   {
     "name": "பொல்லாங்கு",
     "tooltip": "",
     "color": "#FF0000",
     "children": [
       {
         "name": "தீது",
         "tooltip": "",
         "color": "#FF0000",
         "children": [
           {
             "name": "தீமை",
             "tooltip": "நன்றிதுதீதென(திருவாச.49,2).",
             "color": "#FF0000"
           },
           {
             "name": "பாவச்செயல்",
             "tooltip": "உள்ளத்தாலுள்ளலுந்தீதே(குறள்,282).",
             "color": "#FF0000"
           },
           {
             "name": "துன்பம்",
             "tooltip": "தீதுண்டோமன்னுமுயிர்க்கு(குறள்,190).",
             "color": "#00C957"
           },
           {
             "name": "கேடு",
             "tooltip": "அனல்கனற்றத்தீதுறும்பஞ்சியின்(உபதேசகா.சிவவிரத.164).",
             "color": "#00C957"
           },
           {
             "name": "இடையூறு",
             "tooltip": "இடையூறு,தீதின்றுருள்கநீயேந்தியதிகிரி(மணி.22,16).",
             "color": "#00C957"
           },
           {
             "name": "இறப்பு",
             "tooltip": "நின்மகன்றீதினீங்கினான்(சீவக.327).",
             "color": "#1E90FF"
           },
           {
             "name": "உடம்பு",
             "tooltip": "(சிலப்.19,66,உரை.)",
             "color": "#FF00FF"
           }
         ]
       },
       {
         "name": "குற்றம்",
         "tooltip": "",
         "color": "#FF0000",
         "children": [
           {
             "name": "பிழை",
             "tooltip": "ஏதிலார்குற்றம்போற்றங்குற்றங்காண்கிற்பின்(குறள்.190).",
             "color": "#FF0000"
           },
           {
             "name": "குறை",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "குறைபாடு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "கறை",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "வழு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "பழுது",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "பிழைபாடு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "தவறு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "பழி",
             "tooltip": "குற்றமின்முனிவரும்(கந்தபு.வரைபுனை.218).",
             "color": "#00C957"
           },
           {
             "name": "பழிக்கூறு",
             "tooltip": "",
             "color": "#00C957"
           },
           {
             "name": "அவதூறு",
             "tooltip": "",
             "color": "#00C957"
           },
           {
             "name": "இழிதகவு",
             "tooltip": "",
             "color": "#00C957"
           },
           {
             "name": "இகழ்ச்சி",
             "tooltip": "",
             "color": "#00C957"
           },
           {
             "name": "திட்டு",
             "tooltip": "",
             "color": "#00C957"
           },
           {
             "name": "வசவு",
             "tooltip": "",
             "color": "#00C957"
           },
           {
             "name": "இழுக்கு",
             "tooltip": "",
             "color": "#00C957"
           },
           {
             "name": "குற்றச்சாட்டு",
             "tooltip": "",
             "color": "#00C957"
           },
           {
             "name": "துன்பம்",
             "tooltip": "குடும்பத்தைக்குற்றமறைப்பான்(குறள்.1029).",
             "color": "#1E90FF"
           },
           {
             "name": "வேதனை",
             "tooltip": "",
             "color": "#1E90FF"
           },
           {
             "name": "மனத்துன்பம்",
             "tooltip": "",
             "color": "#1E90FF"
           },
           {
             "name": "மனத்துயர்",
             "tooltip": "",
             "color": "#1E90FF"
           },
           {
             "name": "வருத்தம்",
             "tooltip": "",
             "color": "#1E90FF",
             "children": [
               {
                 "name": "துன்பம்",
                 "tooltip": "களிற்றின்வருத்தஞ்சொலிய(அகநா.8).",
                 "color": "#FF0000"
               },
               {
                 "name": "கஷ்டம்",
                 "tooltip": "மெய்வருத்தம்பாரார்(நீதிநெறி,53).",
                 "color": "#FF0000"
               },
               {
                 "name": "சிரமம்",
                 "tooltip": "",
                 "color": "#FF0000"
               },
               {
                 "name": "முயற்சி",
                 "tooltip": "ஆற்றின்வருந்தாவருத்தம்(குறள்.468).",
                 "color": "#00C957"
               },
               {
                 "name": "ஊக்கம்",
                 "tooltip": "",
                 "color": "#00C957"
               },
               {
                 "name": "களைப்பு",
                 "tooltip": "அசைந்துகடைந்தவருத்தமோ(திவ்.இயற்.3,64).",
                 "color": "#1E90FF"
               },
               {
                 "name": "முழுச்சோர்வு",
                 "tooltip": "",
                 "color": "#1E90FF"
               },
               {
                 "name": "சோர்வு",
                 "tooltip": "",
                 "color": "#1E90FF"
               },
               {
                 "name": "தளர்ச்சி",
                 "tooltip": "",
                 "color": "#1E90FF"
               }
             ]
           },
           {
             "name": "அங்கக்குறை",
             "tooltip": "",
             "color": "#FF00FF"
           },
           {
             "name": "தீங்கு",
             "tooltip": "கோடாதவேதனுக்கியான்செய்தகுற்றமென்(கந்தரலங்.76).",
             "color": "#8A2BE2"
           },
           {
             "name": "தூய்மைக்கேடு",
             "tooltip": "",
             "color": "#0000FF"
           },
           {
             "name": "அபராதம்",
             "tooltip": "",
             "color": "#EE1289"
           }
         ]
       },
       {
         "name": "கேடு",
         "tooltip": "",
         "color": "#FF0000",
         "children": [
           {
             "name": "அழிவு",
             "tooltip": "கேடிவல்விழுச்செல்வம்(குறள்,400).",
             "color": "#FF0000"
           },
           {
             "name": "நஷ்டம்",
             "tooltip": "நேராகக்காணுமேற்கேடோருவன்கைப்படும்(சினேந்.158).",
             "color": "#FF0000"
           },
           {
             "name": "வறுமை",
             "tooltip": "கேட்டினுமுண்டோருறுதி(குறள்,796).",
             "color": "#FF0000"
           },
           {
             "name": "தீமை",
             "tooltip": "கிள்ளைபோன்மொழியார்க்கெல்லாங்கேடுசூழ்கின்றேனன்றே(கம்பரா.மாரீச.77).",
             "color": "#FF0000"
           },
           {
             "name": "மரணம்",
             "tooltip": "பிணிபிறவிகேடென்று(தேவா.935,1).",
             "color": "#00C957"
           },
           {
             "name": "கெடுதல்விகாரம்",
             "tooltip": "வந்தனகரந்திரிந்துழிநண்ணுங்கேடே(நன்.210).",
             "color": "#1E90FF"
           },
           {
             "name": "அழகின்மை",
             "tooltip": "",
             "color": "#FF00FF"
           }
         ]
       },
       {
         "name": "ஈனம்",
         "tooltip": "",
         "color": "#00C957",
         "children": [
           {
             "name": "இழிவு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "கீழ்மை",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "தாழ்வு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "குறைபாடு",
             "tooltip": "",
             "color": "#00C957"
           },
           {
             "name": "கள்ளி",
             "tooltip": "",
             "color": "#1E90FF"
           },
           {
             "name": "சரிவு",
             "tooltip": "",
             "color": "#FF00FF"
           },
           {
             "name": "முயல்",
             "tooltip": "",
             "color": "#8A2BE2"
           }
         ]
       },
       {
         "name": "மறதி",
         "tooltip": "",
         "color": "#1E90FF",
         "children": [
           {
             "name": "ஞாபகமறதி",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "நினைவிழப்பு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "நினைவின்மை",
             "tooltip": "",
             "color": "#FF0000"
           }
         ]
       }
     ]
   },
   {
     "name": "அநீதி",
     "tooltip": "",
     "color": "#FF0000",
     "children": [
       {
         "name": "அநியாயம்",
         "tooltip": "",
         "color": "#FF0000"
       },
       {
         "name": "",
         "tooltip": "",
         "color": "white"
       }
     ]
   },
   {
     "name": "கபடம்",
     "tooltip": "",
     "color": "#FF0000",
     "children": [
       {
         "name": "வஞ்சகம்",
         "tooltip": "",
         "color": "#FF0000",
         "children": [
           {
             "name": "தந்திரம்",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "ஏமாற்றம்",
             "tooltip": "வஞ்சகப்பெரும்புலையனேனையும்(திருவாச.5,96).",
             "color": "#FF0000"
           },
           {
             "name": "சூழ்ச்சி",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "கைத்திறம்",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "ஏய்ப்பு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "மோசடி",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "வஞ்சகச்சூழ்ச்சி",
             "tooltip": "(யாழ்.அக.)",
             "color": "#FF0000"
           },
           {
             "name": "இரண்டகம்",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "சூது",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "எத்துமானம்",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "புரட்டு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "மறைவு",
             "tooltip": "(யார்.அக.)",
             "color": "#00C957"
           }
         ]
       },
       {
         "name": "",
         "tooltip": "",
         "color": "white"
       }
     ]
   },
   {
     "name": "சூழ்ச்சி",
     "tooltip": "",
     "color": "#FF0000",
     "children": [
       {
         "name": "வியாபகம்",
         "tooltip": "",
         "color": "#FF0000"
       },
       {
         "name": "படர்வு",
         "tooltip": "",
         "color": "#FF0000"
       },
       {
         "name": "ஆலோசனை",
         "tooltip": "போற்றார்ய்பொறுத்தலுஞ்சூழ்ச்சியதகலமும்(புறநா.2,7).",
         "color": "#00C957",
         "children": [
           {
             "name": "யோசனை",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "சிந்திப்பு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "பார்வை",
             "tooltip": "(நாநார்த்த.)",
             "color": "#00C957"
           },
           {
             "name": "காட்சி",
             "tooltip": "",
             "color": "#00C957"
           }
         ]
       },
       {
         "name": "முதிர்சிந்தனை",
         "tooltip": "",
         "color": "#00C957"
       },
       {
         "name": "ஆழ்ந்தாராய்வு",
         "tooltip": "",
         "color": "#00C957"
       },
       {
         "name": "கலந்தாய்வு",
         "tooltip": "",
         "color": "#00C957",
         "children": [
           {
             "name": "கலந்துபேசு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "அறிவுரை",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "கருத்துரை",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "கலந்தாய்வுக்கூட்டம்",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "மாநாடு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "ஆலோசனைக்கூட்டம்",
             "tooltip": "",
             "color": "#FF0000"
           }
         ]
       },
       {
         "name": "அறிவுரை",
         "tooltip": "",
         "color": "#00C957"
       },
       {
         "name": "நுண்ணறிவு",
         "tooltip": "கருமக்கிடக்கையுங்கவங்காச்சூழ்ச்சியும்(பெருங்.உஞ்சைக்.46,117).",
         "color": "#1E90FF",
         "children": [
           {
             "name": "நுண்ணுணர்வு",
             "tooltip": "நூலளவேயாகுமாநுண்ணறிவு(வாக்குண்.7).",
             "color": "#FF0000"
           },
           {
             "name": "",
             "tooltip": "",
             "color": "white"
           }
         ]
       },
       {
         "name": "உபாயம்",
         "tooltip": "சொல்லாயானுன்னைச்சார்வதோர்சூழ்ச்சியே(திவ்.திருவாய்.3,2,3).",
         "color": "#FF00FF",
         "children": [
           {
             "name": "சூழ்ச்சி",
             "tooltip": "யாஅருபாயத்தின்வாழாதார்(நாலடி,119).",
             "color": "#FF0000"
           },
           {
             "name": "சொற்பம்",
             "tooltip": "",
             "color": "#00C957"
           },
           {
             "name": "சாதனம்",
             "tooltip": "காசுஒடுக்கஉபாயமில்லாமையாலும்(S.I.I.v,370).",
             "color": "#1E90FF"
           }
         ]
       },
       {
         "name": "வழிவகை",
         "tooltip": "",
         "color": "#FF00FF"
       },
       {
         "name": "தகுமுறை",
         "tooltip": "",
         "color": "#FF00FF"
       },
       {
         "name": "வழித்துணை",
         "tooltip": "",
         "color": "#FF00FF"
       },
       {
         "name": "மனத்தடுமாற்றம்",
         "tooltip": "கைம்மிகனலிதல்சூழ்ச்சி(தொல்.பொ.260).",
         "color": "#8A2BE2"
       },
       {
         "name": "கடுந்துன்பம்",
         "tooltip": "",
         "color": "#8A2BE2"
       },
       {
         "name": "வேதனை",
         "tooltip": "",
         "color": "#8A2BE2",
         "children": [
           {
             "name": "வருத்தம்",
             "tooltip": "வேதனைபெருகி(சீவக.2506).",
             "color": "#FF0000",
             "children": [
               {
                 "name": "துன்பம்",
                 "tooltip": "களிற்றின்வருத்தஞ்சொலிய(அகநா.8).",
                 "color": "#FF0000"
               },
               {
                 "name": "கஷ்டம்",
                 "tooltip": "மெய்வருத்தம்பாரார்(நீதிநெறி,53).",
                 "color": "#FF0000"
               },
               {
                 "name": "சிரமம்",
                 "tooltip": "",
                 "color": "#FF0000"
               },
               {
                 "name": "முயற்சி",
                 "tooltip": "ஆற்றின்வருந்தாவருத்தம்(குறள்.468).",
                 "color": "#00C957"
               },
               {
                 "name": "ஊக்கம்",
                 "tooltip": "",
                 "color": "#00C957"
               },
               {
                 "name": "களைப்பு",
                 "tooltip": "அசைந்துகடைந்தவருத்தமோ(திவ்.இயற்.3,64).",
                 "color": "#1E90FF"
               },
               {
                 "name": "முழுச்சோர்வு",
                 "tooltip": "",
                 "color": "#1E90FF"
               },
               {
                 "name": "சோர்வு",
                 "tooltip": "",
                 "color": "#1E90FF"
               },
               {
                 "name": "தளர்ச்சி",
                 "tooltip": "",
                 "color": "#1E90FF"
               }
             ]
           },
           {
             "name": "தொல்லை",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "மனக்கலக்கம்",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "உணர்ச்சி",
             "tooltip": "பஞ்சகந்தங்களுள்சுகழந்துக்கமும்அவ்விரண்டின்கலப்புமானஉணர்ச்சி.(மணி.30,189-190,உரை.)",
             "color": "#FF0000"
           },
           {
             "name": "நோவு",
             "tooltip": "(பிங்.)கருப்பம்...வேதனைமுதிர்ந்துகாட்ட(பிரமோத்.6,18).",
             "color": "#00C957",
             "children": [
               {
                 "name": "வலி",
                 "tooltip": "",
                 "color": "#FF0000"
               },
               {
                 "name": "துன்பம்",
                 "tooltip": "(திவா.)",
                 "color": "#FF0000"
               },
               {
                 "name": "வேதனை",
                 "tooltip": "",
                 "color": "#FF0000"
               },
               {
                 "name": "மனத்துயர்",
                 "tooltip": "",
                 "color": "#FF0000"
               },
               {
                 "name": "மனத்துன்பம்",
                 "tooltip": "",
                 "color": "#FF0000"
               },
               {
                 "name": "வியாதி",
                 "tooltip": "",
                 "color": "#00C957"
               },
               {
                 "name": "ஊறு",
                 "tooltip": "",
                 "color": "#00C957"
               },
               {
                 "name": "காயம்",
                 "tooltip": "",
                 "color": "#00C957"
               },
               {
                 "name": "தீங்கு",
                 "tooltip": "",
                 "color": "#00C957"
               },
               {
                 "name": "பிரசவவேதனை",
                 "tooltip": "ஈன்றக்கானோவும்(நாலடி,201).",
                 "color": "#1E90FF"
               },
               {
                 "name": "இரக்கம்",
                 "tooltip": "தாம்நோவுபடாநிற்பர்(ஈடு).",
                 "color": "#FF00FF"
               }
             ]
           },
           {
             "name": "நுகர்ச்சி",
             "tooltip": "(மணி.30,46,உரை.)",
             "color": "#1E90FF"
           },
           {
             "name": "கருமம்",
             "tooltip": "",
             "color": "#FF00FF"
           }
         ]
       }
     ]
   },
   {
     "name": "மோசடி",
     "tooltip": "",
     "color": "#FF0000",
     "children": [
       {
         "name": "ஏமாற்றம்",
         "tooltip": "",
         "color": "#FF0000",
         "children": [
           {
             "name": "நம்பிக்கைகுலை",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "மனமுறிவு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "மனக்கசப்பு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "வஞ்சகம்",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "ஏக்கம்",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "எண்ணக்குலைவு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "மனஉலைவு",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "மோசடி",
             "tooltip": "",
             "color": "#FF0000"
           },
           {
             "name": "தோல்வி",
             "tooltip": "",
             "color": "#FF0000"
           }
         ]
       },
       {
         "name": "",
         "tooltip": "",
         "color": "white"
       }
     ]
   }
 ]
};
var i = 0,
   duration = 750;
 var root=data;
var width = 1000;
var height =1000;
var radius = 500 / 2;
var cluster = d3.layout.cluster()
 .size([360, radius - 120]);
var diagonal = d3.svg.diagonal.radial()
 .projection(function(d) {
   return [d.y, d.x / 180 * Math.PI];
 });
var svg = d3.select("#tree-container").append("svg")
   .attr("width", width)
   .attr("height", height)
 .append("g")
   .attr("transform", "translate(" + 650 + "," + 300 + ")");
 root = data;
 root.x0 = height / 2;
 root.y0 = 0;
 function collapse(d) {
   if (d.children) {
     d.all_children = d.children;
     d._children = d.children;
     d._children.forEach(collapse);
     d.children = null;
     d.hidden = true;
   }
 }
 root.all_children = root.children;
 root.children.forEach(collapse);
 root.children.forEach(function(d) { d.hidden = false; });
 root.hidden = false;
 update(root);
d3.select(self.frameElement).style("height", "800px");
window.onload=nn();
function nn(){
d3.select('text').style("stroke","red");
d3.select('text').style("font-size","17px");
d3.select('text').style("font-weight","lighter");
// d3.select('text').attr("x", function(d) { return d.x < 180 === d.children ? 6 : -6; })
d3.select('text').attr("y", function(d) { return d.y < 180 === d.children ? 20 : -20; })
}
function update(source) {
var nodes = cluster.nodes(root);
     links = cluster.links(nodes);
 var node = svg.selectAll("g.node")
     .data(nodes, function(d) { return d.id || (d.id = ++i); });
//nodes.forEach(function(d) { d.y = d.depth * 70; });
svg.append("svg:defs").selectAll("marker")
   .data(["end"])  
 .enter().append("svg:marker")
   .attr("id", String)
   .attr("viewBox", "0 -5 10 10")
   .attr("refX", 15)
   .attr("refY", -1.5)
   .attr("markerWidth", 6)
  // .attr("markerHeight", 6)
   .attr("orient", "auto")
 .append("svg:path")
   .attr("d", "M0,-5L10,0L0,5");
var nodeEnter = node.enter().append("g")
     .attr("class", "node")
   .on("click",function(d){
click(d);
});
 
  nodeEnter.append("circle")
       .attr("class", "smallcircle")
.attr("id", function(d){return "node" + d.id;})
           .style("stroke", function(d) {
     return d.color;
   })
 nodeEnter.append("text")
   .text(function (d) {
       return d.name;
   })
   .style("opacity", 1)
.on("mouseover", function (d) {
var r = d3.select(this).node().getBoundingClientRect();
          d3.select("div#tooltip")
               .style("display", "inline")
              .style("top", (r.top-25) + "px")
  .style("top", 25 + "px")
//    .text(d3.event.pageX + ", " + d3.event.pageY)
     .style("left", (d3.event.pageX) + "px")
     .style("top", (d3.event.pageY - 40) + "px")
             .style("left", r.left + 80+"px")
 .style("left",  + "px")
               .style("position", "absolute")
              .text(d.tooltip);
})
   .on("mouseout", function(){
      d3.select("div#tooltip").style("display", "none")
  })
       .style("fill-opacity", 0);
   node.select("circle.nodeCircle")
       .attr("r", 4.5)
      var nodeUpdate = node.transition()
       .duration(duration)
 .attr("transform", function (d) {
       return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")rotate(" + (-d.x + 90) + ")";
  });
   nodeUpdate.select("circle")
       .attr("r", 4.5)
       .style("fill", function (d) {
       if (d._children){
return d.color;
}
   });
   nodeUpdate.select("text")
 .style("fill-opacity", 9)
  .style("fill", function(d) {
    return d.color;
   })
.attr("font-size",function(d){return (d.children?"17px":"14px");})
.attr("dy", ".35em")
//  .attr("font-size","14px")
.attr("font-weight",function(d){return (d.children?"bolder":"lighter");})
.attr("x", function(d) { return d.x < 180 === !d.children ? 6 : -6; })
//.attr("y", function(d) { return d.y < 180 === !d.children ? 6 : -6; })
       .attr("text-anchor", function (d) {
       return d.x < 180 ? "start" : "end";
   })
.attr("transform", function(d) { return d.children?"rotate(360)":"rotate(" + (d.x < 180 ? d.x - 90 : d.x + 90) + ")"; });
 var nodeExit = node.exit().transition()
     .duration(duration)
     .remove();
 nodeExit.select("circle")
     .attr("r", 1e-6);
 nodeExit.select("text")
     .style("fill-opacity", 1e-6);
function x(d) { console.log(d); return d.y * Math.cos((d.x - 90) / 180 * Math.PI); }
function y(d) { return d.y * Math.sin((d.x - 90) / 180 * Math.PI); }
 var link = svg.selectAll("path.link")
    .data(links, function(d) { return d.target.id; });
 link.enter().insert("path", "g")
     .attr("class", "link")
  .attr("id", function(d){ return ("link" + d.source.id + "-" + d.target.id)})
    .style("stroke", function(d) {
    return d.target.color;
   })//.attr("marker-end", "url(#end)")
      .attr("d",diagonal);
 link.transition()
     .duration(duration)//.attr("marker-end", "url(#end)")
       .attr("d",diagonal);
 
 link.exit().transition()
     .duration(duration)//.attr("marker-end", "url(#end)")
         .attr("d",diagonal)
     .remove();
 
 nodes.forEach(function(d) {
   d.x0 = d.x;
   d.y0 = d.y;
 });
}
function click(d) {
if(!d.parent)
{
return;
}
 if (d.children) {
   d._children = d.children;
   d.children = null;
   if (d._children) {
       d._children.forEach(function(n) { n.hidden = true; });
   
       if (d.parent) {
           d.parent.children = d.parent.all_children;
           d.parent.children.forEach(function(n) {
               n.hidden = false;
           });
       }
   }
 } else {
   d.children = d._children;
   d._children = null;
   if (d.children) {
       d.children.forEach(function(n) { n.hidden = false; });
   
       if (d.parent) {
           d.parent.children = [d,];
 d.parent.children.filter(function(n) { return n !== d; }).forEach(function(n) {
               n.hidden = true;
           });
       }
   }
 }
 d3.selectAll("text").attr("y","-15");
 
 
update(d);
}
 
</script>
</div>
 </body>
</html>

Aug 03, 2017 05:48:42

I doubt anyone will want to go through 1200+ lines of code. If you can remove everything that's not relevant, cutting at least 1000 lines, you may have a better chance of getting an answer.

look! it's a bird! it's a plane! It's .... a teeny tiny ad

a bit of art, as a gift, the permaculture playing cards

https://gardener-gift.com