个人中心
gpt4 book ai didi

javascript - 如何根据节点点击到达 URL？

转载 作者：行者123 更新时间：2023-11-30 19:09:26 25 4
gpt4 key购买 nike

我的目标是使用 D3.js 到达节点图上的 url - 以这种方式格式化:(“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。

非常感谢

最佳答案

要在用户单击节点时打开一个新选项卡，您只需要:

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

关于javascript - 如何根据节点点击到达 URL？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58651718/

25 4 0
文章推荐： c# - 如何将数据访问映射到 Entity Framework 中的业务逻辑对象
文章推荐： c - C编译时出现错误 "error: stray '\34 2' "、 "stray '\20 0' "、 "stray '\23 4' "
文章推荐： c# - WPF 中的全局鼠标 Hook
文章推荐： c - TAD 函数中的段错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com