All geek questions in one place

D3js Make Last Circle Hyperlink

Ok ... I use Zoomable Circle Packing from http://bl.ocks.org/mbostock/7607535 I opened the flare.json file and started messing with it and was able to process it successfully. It looks like this:

flare.json

{ "name": "flare", "children": [ { "name": "Kommunikation und Umwelt", "children": [ { "name": "Courses", "children": [ { "name": "AO-Psy.", "children": [ {"name": "Prof. A", "size": 5731,"url":"google.com"}, {"name": "Prof. B", "size": 5731}, {"name": "Prof. C", "size": 5731} ] }, { "name": "E&E", "children": [ {"name": "Prof. D", "size": 5731}, {"name": "Prof. E", "size": 5731}, {"name": "Prof. F", "size": 5731}, {"name": "Prof. G", "size": 5731}, {"name": "Prof. H", "size": 5731} ] }, { "name": "IBSS", "children": [ {"name": "Prof. I", "size": 5731}, {"name": "Prof. J", "size": 5731}, {"name": "Prof. K", "size": 5731} ] }, {"name": "", "size": 0}, { "name": "E-Gov", "children": [ {"name": "Prof. L", "size": 5731}, {"name": "Prof. M", "size": 5731}, {"name": "Prof. N", "size": 5731} ] }, { "name": "Muki", "children": [ {"name": "Prof. O", "size": 5731}, {"name": "Prof. P", "size": 5731}, {"name": "Prof. Q", "size": 5731}, {"name": "Prof. V", "size": 5731} ] }, {"name": "Schedule", "size": 5731}, {"name": "News", "size": 5731}, {"name": "Events", "size": 5731}, {"name": "Search", "size": 5731}, {"name": "", "size": 0} ] }, {"name": "", "size": 0} ]

},

What I want to do now is try to add hyperlinks. For example, I want to be able to click "ProfA" and go to another html page that I will create. Is there any modification I can do for flare.json that will do this?

I already found some posts Post1 Post2 Post3
but nothing works, it just zooms out.

here is the full html file, flare.json is already posted here (short part)
zoom.html:

 <html xmlns:xlink="http://www.w3.org/1999/xlink"> <meta charset="utf-8"> <style> .node { cursor: pointer; } .node:hover { stroke: #000; stroke-width: 1.5px; } .node--leaf { fill: #14DCD2; } .label { font: 20px "Helvetica Neue", Helvetica, Arial, sans-serif; text-anchor: middle; text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff; } .label, .node--root, .node--leaf { pointer-events: none; } </style> <body> <script src="http://d3js.org/d3.v3.min.js"></script> <script> var margin = 600, diameter = 1920; var color = d3.scale.linear() .domain([-1, 5]) .range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"]) .interpolate(d3.interpolateHcl); var pack = d3.layout.pack() .padding(2) .size([diameter - margin, diameter - margin]) .value(function(d) { return d.size; }) var svg = d3.select("body").append("svg") .attr("width", diameter) .attr("height", diameter) .append("g") .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")"); d3.json("flare.json", function(error, root) { if (error) return console.error(error); var focus = root, nodes = pack.nodes(root), view; var circle = svg.selectAll("circle") .data(nodes) .enter().append("circle") .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; }) .style("fill", function(d) { return d.children ? color(d.depth) : null; }) .on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); }) var text = svg.selectAll("text") .data(nodes) .enter().append("text") .attr("class", "label") .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; }) .style("display", function(d) { return d.parent === root ? null : "none"; }) .text(function(d) { return d.name; }) //.on('click', function(d, i) {window.location.href = d.url;}); var node = svg.selectAll("circle,text") node.each(function(d){ var thisNode = d3.select(this); if (!d.children) { thisNode.append("a") .attr("xlink:href", function(d) { return d.url; }) .append("text") .attr("dx", 8) .attr("dy", 3) .attr("text-anchor", "start") .text(function(d) { return d.name; }) ; } else { thisNode.append("text") .attr("dx", -8) .attr("dy", 3) .attr("text-anchor", "end") .text(function(d) { return d.name; }); } }); d3.select("body") .style("background", color(-1)) .on("dblclick", function() { zoom(root); }); zoomTo([root.x, root.y, root.r * 2 + margin]); function zoom(d) { var focus0 = focus; focus = d; //.attr("xlink:href", url); //.on('click', function(d, i) {window.location.href = d.url;}); var transition = d3.transition() .duration(d3.event.altKey ? 7500 : 750) .tween("zoom", function(d) { var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 4 + margin]); return function(t) { zoomTo(i(t)); }; }); transition.selectAll("text") .filter(function(d) { return d.parent === focus || this.style.display === "inline"; }) .style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; }) .each("start", function(d) { if (d.parent === focus) this.style.display = "inline"; }) .each("end", function(d) { if (d.parent !== focus) this.style.display = "none"; }); } function zoomTo(v) { var k = diameter / v[2]; view = v; node.attr("transform", function(d) { return "translate(" + (dx - v[0]) * k + "," + (dy - v[1]) * k + ")"; }); circle.attr("r", function(d) { return dr * k; }); } }); d3.select(self.frameElement).style("height", diameter + "px"); </script> </html>
+6
source share
2 answers

The problem with your setup is mainly due to the fact that you have pointer-events: none for certain elements like leaves (the smallest circles).

If you fix this and define the click event so that it directs the URL instead of triggering a zoom event for the leaves, you will get the desired behavior.

I have compiled a small violin for you, see here: http://jsfiddle.net/chroth/fkxcvtu9/3/

The core of the idea is here ( click function):

 function clickFct(d,i) { if (d3.select(this).classed("node--leaf")) { alert(d.url); //open URL here } else { if (focus !== d) { zoom(d); d3.event.stopPropagation(); } } }

and in this style change:

  .node--root, .node--leaf { pointer-events: all; }

Todos

As you can see, now I'm just removing the alert . In addition, you can disable certain click events if they are not enlarged, etc. Plus work with colors.

Also note that you need to capture the visibility of tags, etc.

But I leave it to you :)

Hope this helps.

+6
source

Thanks Pinguin. It works correctly for me, but I'm not sure of the purpose for the parameter I in your function. Here is a small modification that protects against undefined URLs.

 function onClickLeaf(d) { if (d3.select(this).classed("node--leaf")) { if(d.url !== undefined) { alert(d.url); //open URL here } } else { if (focus !== d) { zoom(d); d3.event.stopPropagation(); } } }

It’s enough to vote for me because of this particular line of code and be nice enough to turn it into a function for simplicity.

 if (d3.select(this).classed("node--leaf"))
+1
source

Source: https://habr.com/ru/post/979740/

More articles:


All Articles