CODEWITHSUNDEEP
javascriptd3.jshref
Sofiane M'barki
Sofiane M'barki

Reputation: 193

How to reach a URL based on a node click?

my goal is to reach an url -on a node graph with D3.js- formated in this way : ("xyz.net"). The graphique is distributed as follow : Visualy speaking, there is my central node named (id:: flare), distributed in two categories {id:: analytics, id:: animate} continually distributed with the same mechanism for the other child nodes as you can see at this end of my post is a csv format. Where each other ramifications are represented with a (.). And at this end, after all the other dimensions, there is the last one url:: which i'm trying to represented on my plot with as an url clicking node.

I tried few solutions with .on.click() and .attr("xlink:href", url) links but I only receving ouputs as a blank page.

Part that I'm dealing with :

    node.append("text")
        .attr("dy", ".31em")
        .attr("x", function(d) { return d.x < 180 === !d.children ? 6 : -6; })
        .style("text-anchor", function(d) { return d.x < 180 === !d.children ? "start" : "end"; })
        .attr("transform", function(d) { return "rotate(" + (d.x < 180 ? d.x - 90 : d.x + 90) + ")"; })
        .text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); });

Here is the entire code :

<!DOCTYPE html>
<!-- saved from url=(0022)http://localhost:8000/ -->
<html xmlns:xlink="http://www.w3.org/1999/xlink">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="https://d3js.org/d3.v5.min.js"></script>

  <body>

    <svg width="960" height="1060"></svg>

    <script>

      var svg = d3.select("svg"),
          width = +svg.attr("width"),
          height = +svg.attr("height"),
          g = svg.append("g").attr("transform", "translate(" + (width / 2 + 40) + "," + (height / 2 + 90) + ")");

      var stratify = d3.stratify()
          .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });

      var tree = d3.cluster()
          .size([360, window.height / 3])
          .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

      d3.csv("flare.csv").then(function(data) {
        var root = tree(stratify(data));

        var link = g.selectAll(".link")
          .data(root.descendants().slice(1))
          .enter().append("path")
            .attr("class", "link")
            .attr("d", function(d) {
              return "M" + project(d.x, d.y)
                  + "C" + project(d.x, (d.y + d.parent.y) / 2)
                  + " " + project(d.parent.x, (d.y + d.parent.y) / 2)
                  + " " + project(d.parent.x, d.parent.y);
            });

        var node = g.selectAll(".node")
          .data(root.descendants())
          .enter().append("g")
            .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
            .attr("transform", function(d) { return "translate(" + project(d.x, d.y) + ")"; });


        node.append("circle")
            .attr("r", 15);

        node.append("text")
            .attr("dy", ".31em")
            .attr("x", function(d) { return d.x < 180 === !d.children ? 6 : -6; })
            .style("text-anchor", function(d) { return d.x < 180 === !d.children ? "start" : "end"; })
            .attr("transform", function(d) { return "rotate(" + (d.x < 180 ? d.x - 90 : d.x + 90) + ")"; })
            .text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); });

})


      function project(x, y) {
        var angle = (x - 90) / 180 * Math.PI, radius = y;
        return [radius * Math.cos(angle), radius * Math.sin(angle)];
      }

    </script>
  </body>
</html>

My csv looks like that :

id,value,url
flare,,https://www.youtube.com/?hl=FR
flare.analytics,,https://www.youtube.com/?hl=FR
flare.analytics.cluster,,https://www.youtube.com/?hl=FR
flare.analytics.cluster.AgglomerativeCluster,3938,https://www.youtube.com/?hl=FR
flare.analytics.cluster.CommunityStructure,3812,https://www.youtube.com/?hl=FR
flare.analytics.cluster.HierarchicalCluster,6714,https://www.youtube.com/?hl=FR
flare.analytics.cluster.MergeEdge,743,https://www.youtube.com/?hl=FR
flare.analytics.graph,,https://www.youtube.com/?hl=FR
flare.analytics.graph.BetweennessCentrality,3534,https://www.youtube.com/?hl=FR
flare.analytics.graph.LinkDistance,5731,https://www.youtube.com/?hl=FR
flare.analytics.graph.MaxFlowMinCut,7840,https://www.youtube.com/?hl=FR
flare.analytics.graph.ShortestPaths,5914,https://www.youtube.com/?hl=FR
flare.analytics.graph.SpanningTree,3416,https://www.youtube.com/?hl=FR
flare.analytics.optimization,,https://www.youtube.com/?hl=FR
flare.analytics.optimization.AspectRatioBanker,7074,https://www.youtube.com/?hl=FR
flare.animate,,https://www.youtube.com/?hl=FR
flare.animate.Easing,17010,https://www.youtube.com/?hl=FR
flare.animate.FunctionSequence,5842,https://www.youtube.com/?hl=FR
flare.animate.interpolate,,https://www.youtube.com/?hl=FR
flare.animate.interpolate.ArrayInterpolator,1983,https://www.youtube.com/?hl=FR
flare.animate.interpolate.ColorInterpolator,2047,https://www.youtube.com/?hl=FR
flare.animate.interpolate.DateInterpolator,1375,https://www.youtube.com/?hl=FR
flare.animate.interpolate.Interpolator,8746,https://www.youtube.com/?hl=FR
flare.animate.interpolate.MatrixInterpolator,2202,https://www.youtube.com/?hl=FR

My goal is to reach url condensed on a csv under the label url for each node of the graph I'm designing.

Thank you very much

Upvotes: 1

Views: 127

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102198

For opening a new tab when the user clicks on the node, all you need is:

.on("click", function(d) {
    window.open(d.url, "_blank");
});

In your case, do that in the enter selection of the nodes:

var node = g.selectAll(".node")
      .data(root.descendants())
      .enter().append("g")
        .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
        .attr("transform", function(d) { return "translate(" + project(d.x, d.y) + ")"; })
        .on("click", function(d) {
            window.open(d.url, "_blank");
        });

Upvotes: 1

Related Questions