Как получить URL на основе клика по узлу? - PullRequest
Новая
       22

Как получить URL на основе клика по узлу?

1 голос
/ 01 ноября 2019

Моя цель - получить URL-адрес на графе узлов с помощью D3.js, сформированного таким образом: ("xyz.net"). Графическое изображение распределяется следующим образом: говоря наглядно, есть мой центральный узел с именем (id :: flare), распределенный по двум категориям: {id :: analytics, id :: animate}, постоянно распространяемый с тем же механизмом для других дочерних узлов, что иВы можете увидеть в этом конце моего поста в формате CSV. Где разветвления друг друга обозначены (.). И на этом конце, после всех других измерений, есть последний URL-адрес, который я пытаюсь представить на своем графике в качестве узла щелчка URL-адреса.

Я пробовал несколько решений со ссылками .on.click() и .attr("xlink:href", url), но я получал только выходные данные в виде пустой страницы.

Часть, с которой я имею дело: 

    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); });

Вот весь код: 

<!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>

Мой CSV выглядит так: 

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

Моя цель - получить URL, скомпонованный в csv под меткой url для каждого узла графа, который я создаю.

Большое спасибо

1 Ответ

1 голос
/ 01 ноября 2019

Для открытия новой вкладки, когда пользователь нажимает на узел, все, что вам нужно, это: 

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

В вашем случае, сделайте это при выборе ввода 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");
        });
...