Search code examples
javascriptsvgd3.jshyperlinkbundle-layout

d3: Adding links to nodes in hierarchical edge bundling


I'm a super beginner to d3/HTML/JS and I had a question about adding links to nodes in a graph. All of my code is based on: https://gist.github.com/mbostock/7607999

enter image description here

I'd like to add a link that leads to another html file for each node. Is that possible given how the code is structured?


Solution

  • Here is a simple way to achieve this:

    node = node
        .data(nodes.filter(function(n) { return !n.children; }))
      .enter()
      .append('a')
        .attr("xlink:href", 'http://www.google.com' /*function(d){return d.url;}*/)
      .append("text")
        .attr("class", "node")
        ...
    

    I commented out code that would make the link based on data (i.e. you would have an url field in your input data).

    Per request, example of url in data:

    "children": [
    {
        "name": "John Doe",
                "size": 1458,
                "url":  "http://www.johndoe.com"
                ...