javascript - How can I add links to dendrogram texts? -


i have applied clustered dendrogram show organization's structure. works well. in addition, want add links node texts.

i have added "url" keys json array each node

{     "name": "institutes",     "children": [         {   "name": "social", "url": "http://social.example.com/" },          {   "name": "health", "url": "http://health.example.com/" },         {   "name": "nature", "url": "http://nature.example.com/" },         {   "name": "education", "url": "http://social.example.com/" }     ] }

there 2 problems:

  • <a> tags not wrap <text> element. displayed <a></a><text></text>. want <a><text></text></a>.

  • how can read url key json in order add href attribute's value (see line comment //???) ?

d3.json("org_chart.json", function(error, root) {         var nodes = cluster.nodes(root),                 links = cluster.links(nodes);         var link = svg.selectall(".link")                 .data(links)                 .enter().append("path")                 .attr("class", "link")                 .attr("d", diagonal);          var node = svg.selectall(".node")                 .data(nodes)                 .enter().append("g")                 .attr("class", "node")                 .attr("transform", function(d) {                     return "translate(" + d.y + "," + d.x + ")";                 });          node.append("circle")                 .attr("r", 5.1);          node.append("a")             .attr("href", "#") //???             .attr("target","_blank");          node.append("text")             .attr("dx", function(d) {                 return d.children ? -9 : 8;             })             .attr("dy", 3)             .style("text-anchor", function(d) {                 return d.children ? "end" : "start";             })             .text(function(d) {                 return d.name;             });     });

one more thing:

i have tried 

node.append("a").attr("href", function (d) { return d.url;});

and returns undefined. have tried 

node.append("a").attr("href", "http://example.com");

although looks like

<g class="node" transform="translate(0,428.74692874692875)">     <circle r="5.1"></circle>     <a href="http://example.com/" target="_blank">         <text dx="-9" dy="3" style="text-anchor: end;">                 education         </text>     </a> </g>

it not open http://example.com when click on it.

when you're using selection.append(name) returns new selection containing appended elements, can append directly it, so:

node.append("a").append("text");

in order obtain url property need use accessor function, so:

node.append("a").attr("href", function (d) {     return d.url; });

edit:

for links might need import xlink namespace in html file:

<html xmlns:xlink="http://www.w3.org/1999/xlink">

and use namespacing:

.append("svg:a").attr("xlink:href", urlaccessor)

see relevant answer here.


Comments

Post a Comment

Popular posts from this blog

javascript - Jquery show_hide, what to add in order to make the page scroll to the bottom of the hidden field once button is clicked -

i have button on website when clicked, reveals map. button can seen when page first loads up, when clicked, section holding map slides open , goes out of screen since page loads @ top (normal). want page scroll down bottom of div select when button pushed, if map out of screen. if page scrolled down, , clicks show map button, don't want page jump bottom of map. i tried figure out myself, no luck. seasoned jquery coders able give me guidance? many thanks! map = mapdiv.gmap3("get"); infobox = new infobox({ pixeloffset: new google.maps.size(-220, -310), closeboxurl: '', enableeventpropagation: true }); mapdiv.delegate('.infobox .close','click',function () { infobox.close(); }); jquery(".slidingdiv").hide(); jquery(".show_hide").show(); jquery('.show_hide').click(function(){ lastcenter=map.getcenter(); jquery(".slidingdiv&quo
Read more

javascript - Highcharts multi-color line -

Image
i looking create highchart multi-colored line. if goes down under value, become red, , when comes on value, become green . here picture example: or maybe highcharts have other charts models differentiate high or low level color? you can achieve coloring using lineargradient coloring: color: { lineargradient: { x1: 0, x2: 0, y1: 0, y2: 1 }, stops: [ [0, 'red'], [0.25, 'yellow'], [0.50, 'green'], [0.75, 'yellow'], [1, 'red'] ] } here 0 in stops relates minimum value of series , 1 maximum value, , in between percentages between values. if find percentages according values prior creating chart use correct stops values make relate specific values in data (at least approximately). see this jsfiddle example .
Read more

javascript - Enter key does not work in search box -

tried search guys sorry. input in search box doesnt work (or search) when hit enter when user clicks search button. doing wrong? here code. thanks. <script type="text/javascript"> $(document).ready(function() { $("#submit").click(function() { var url = "http://asla.org/awardssearch.html"; url += "?s=" + $('#googlecse').val(); window.location = url; }); $('#googlecse').keydown(function(event) { if (event.keycode == '13') { $("#submit").click(); } else { //do nothing :) } }); }); </script> <form class="navbar-form navbar-right" role="search"> <div class="search"> <input id="googlecse" type="text" onblur="if(this.value=='')this.value=this.defaultvalue;" onfocus="if(this.value==this.defaultvalue)t
Read more