d3.js，单击动作到另一个带有sunburst变量数组的URL编码

问题描述

我制作了，并希望为每条路径添加一个链接。

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

我读过类似的问题。

但是，我想生成类似使用层次结构信息。

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

我不太了解javascript，所以我需要帮助。

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

---

我弄清楚如何制作三个级别的网址旭日。
为了根据旭日水平获得价值，我对Lars的建议几乎没有修改。

---

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

推荐答案

旭日布局的节点有一个属性 .parent 包含父节点（或根目录为null）。你可以直接在你的代码中使用它：

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，单击动作到另一个带有sunburst变量数组的URL编码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！