CODEWITHSUNDEEP
d3.js
krishna_v
krishna_v

Reputation: 1511

d3.js - How to add url link in for collapsible indented tree

I have the data in JSON like this:

{
 "name": "OSS Applications",
 "children": [
  {
     "name": "ELITE 3E",
     "children": [
      {"name": "Elite 3E Mobile Gateway"},
      {"name": "Elite 3E Mobile Website"},
      {"name": "Elite 3E Mobile Application"}

     ]
    },
    {
     "name": "WESTLAW DOC & FORM BUILDER",
     "children": [
      {"name": "Cobalt Website WFB"},
      {"name": "Cobalt Static Content WFB"},
      {"name": "Cobalt Search WFA"},
      {"name": "Cobalt Forms Assembly WFB"},
      {"name": "Cobalt Foldering WFB"}
     ]
    },
    {
     "name": "FINDLAW.COM",
     "children": [
      {"name": "Findlaw-Infirmation"},
      {"name": "Findlaw-hippocms"},
      {"name": "Findlaw-Lawyers Directory"},
      {"name": "Findlaw-ProfileUpdate"},
      {"name": "Findlaw-Pview"},
    {"name": "Findlaw-RCMS"},
    {"name": "Findlaw-public-channel"}
     ]
    }
 ]
}

I would like to add a url link to the applications "ELITE 3E", "WESTLAW DOC & FORM BUILDER" and "FINDLAW.com". How do i do that? I am trying to replicate the collapsible indented tree. mbostock’s block #1093025

Upvotes: 0

Views: 2725

Answers (2)

screepinail
screepinail

Reputation: 1

I used to add the link as below, you can add attr onclick.

<text x="7" y="20" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:white;fill:white;" zIndex="1">
    <tspan onclick="location.href="http://target.url.com"" style="cursor: pointer;" x="7">URL TEXT</tspan>
</text>

And another way, you can bind click event to achieve it.

svg.selectAll('.add-url-node')
   .on('click',function(d){
       location.href = 'target.url.com';
   });

Upvotes: 0

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

You can use an SVG link to achieve this. All you need to do is add an a element around the element that you want to act as the link, e.g.

svg.append("a")
   .attr("xlink:href", function(d) { return d.url; })
   .append("circle")
   //etc

To make the link open in a new window, set the target attribute to _blank:

svg.append("a")
   .attr("xlink:href", function(d) { return d.url; })
   .attr("target", "_blank")

Upvotes: 4

Related Questions