问题:

I made sequences sunburst visualization and want to add a link to each path.

I read similar question d3.js, click to link to another URL encoded with variables and could make a link based on variable of specific path. (See the code below) This Code could generate url suck like "http://somelink.com/link.php?id1=CurrentNode".

However, I want to generate url such like "http://somelink.com/link.php?id1=CurrentNode&id2=ParentNode" using hierarchy information.

I do not know very much about javascript, so I need help.

// Main function to draw and set up the visualization, once we have the data. function createVisualization(json) {    // Basic setup of page elements.   initializeBreadcrumbTrail();   drawLegend();   d3.select("#togglelegend");    // Bounding circle underneath the sunburst, to make it easier to detect   // when the mouse leaves the parent g.   vis.append("svg:circle")       .attr("r", radius)       .style("opacity", 0);    // For efficiency, filter nodes to keep only those large enough to see.   var nodes = partition.nodes(json)       .filter(function(d) {       return (d.dx > 0.005); // 0.005 radians = 0.29 degrees       });    var path = vis.data([json]).selectAll("path")       .data(nodes)       .enter().append("svg:path")       .attr("display", function(d) { return d.depth ? null : "none"; })       .attr("d", arc)       .attr("fill-rule", "evenodd")       .style("fill", function(d) { return colors[d.name]; })       .style("opacity", 1)       .on("mouseover", mouseover)       .on("click", function(d) {               var url = "http://somelink.com/link.php?id1=";               url += d.name;               $(location).attr('href', url);               window.location = url;             });    // Add the mouseleave handler to the bounding circle.   d3.select("#container").on("mouseleave", mouseleave);    // Get total size of the tree = value of root node from partition.   totalSize = path.node().__data__.value;  };

I figure out how to make url for three levels sunburst. To get value based on level of sunburst, I added little modification to the suggestion of Lars.

     .on("click", function(d) {         var url = "http://somelink.com/link.php";         if (d.depth== 1) {         　url += "?id1=" + d.name;         }         if (d.depth== 2) {         　url += "?id1=" + (d.parent ? d.parent.name : "");         　url += "&id2=" + d.name;         }         if (d.depth== 3) {         　url += "?id1=" + (d.parent.parent ? d.parent.parent.name : "");         　url += "&id2=" + (d.parent ? d.parent.name : "");         　url += "&id3=" + d.name;         }         $(location).attr('href', url);         window.location = url;     });

回答1:

The nodes of a sunburst layout have an attribute .parent that contains the parent node (or null for the root). You can use this directly in your code like this:

.on("click", function(d) {           var url = "http://somelink.com/link.php?id1=" + d.name +                       "?id2=" + (d.parent ? d.parent.name : "");           $(location).attr('href', url);           window.location = url;  });

转载请标明出处:d3.js, click action to another URL encoding with array of variables of sunburst

文章来源: d3.js, click action to another URL encoding with array of variables of sunburst

标签

another