score:5

Accepted answer

I've never worked on anything that required me to use urls in an svg object before, so I'm not sure if the way I implemented it is the most efficient/correct. I would be interested in knowing if there is a more correct way to do this.

So here's a codepen of what I believe you wanted: https://codepen.io/anon/pen/WKrKmq?editors=0011

Building off of the code you provided from the d3.js collapsible tree bl.ock, I started by populating the treeData with the following properties; 'events', 'tickets', and 'url'. After that it was pretty simple:

    nodeEnter.append('text')
        .attr('x', function(d) {
          return -15;
        })
        .attr('y', function(d) { 
          return 11
        })
        .text(function(d) {
          return 'tickets - ' + d.tickets;
        })
        .on('click', function(d) {
            window.location = d.url;
        })
        .style('font-size', '6px');    

    nodeEnter.append('text')
        .attr('x', function(d) {
          return -15;
        })
        .attr('y', function(d) { 
          return -5
        })
        .text(function(d) {
          return 'events - ' + d.events;
        })
        .on('click', function(d) {
            window.location = d.url;
        })
        .style('font-size', '6px');   

I also increased the seperation between nodes here:

var tree = d3.layout.tree()
    .separation(function(d) { return 5; })
    .size([viewerHeight, viewerWidth]);

score:2

Have you tried to hard code an SVG with the tags you want? Normal HTML tags are not allowed inside an SVG tag. Just add the text like the tree node text and make them clickable.

What you need to do is at the point where you create the circle with the text and the .on('click', click); inside the g.node create two new g elements, one contains the circle and text and has the .on('click', click);. In the other add your new text elements and also make them respond to a .on('click', textClick);.


Related Query