可折叠力布局中的子项(D3.js对象)中的超链接

我不知道如何在d3.js中编程，我知道我的问题可能很简单，甚至很愚蠢。我正在尝试修改此可视化 http://bl.ocks.org/mbostock/1093130，方法是将超链接添加到层次结构的最后一个对象（橙色对象）。我知道当有人单击父元素时已经发生了一些事情（折叠、展开），但子元素（最后一个）似乎没有在单击时执行特定操作，是否可以在那里添加超链接？

这是索引.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node circle {
  cursor: pointer;
  stroke: #3182bd;
  stroke-width: 1.5px;
}
.node text {
  font: 10px sans-serif;
  pointer-events: none;
  text-anchor: middle;
}
line.link {
  fill: none;
  stroke: #9ecae1;
  stroke-width: 1.5px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
    height = 500,
    root;
var force = d3.layout.force()
    .linkDistance(80)
    .charge(-120)
    .gravity(.05)
    .size([width, height])
    .on("tick", tick);
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
var link = svg.selectAll(".link"),
    node = svg.selectAll(".node");
d3.json("graph.json", function(error, json) {
  root = json;
  update();
});
function update() {
  var nodes = flatten(root),
      links = d3.layout.tree().links(nodes);
  // Restart the force layout.
  force
      .nodes(nodes)
      .links(links)
      .start();
  // Update links.
  link = link.data(links, function(d) { return d.target.id; });
  link.exit().remove();
  link.enter().insert("line", ".node")
      .attr("class", "link");
  // Update nodes.
  node = node.data(nodes, function(d) { return d.id; });
  node.exit().remove();
  var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .on("click", click)
      .call(force.drag);
  nodeEnter.append("circle")
      .attr("r", function(d) { return Math.sqrt(d.size) / 10 || 4.5; });
  nodeEnter.append("text")
      .attr("dy", ".35em")
      .text(function(d) { return d.name; });
  node.select("circle")
      .style("fill", color);
}
function tick() {
  link.attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });
  node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}
function color(d) {
  return d._children ? "#3182bd" // collapsed package
      : d.children ? "#c6dbef" // expanded package
      : "#fd8d3c"; // leaf node
}
// Toggle children on click.
function click(d) {
  if (d3.event.defaultPrevented) return; // ignore drag
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update();
}
// Returns a list of all nodes under the root.
function flatten(root) {
  var nodes = [], i = 0;
  function recurse(node) {
    if (node.children) node.children.forEach(recurse);
    if (!node.id) node.id = ++i;
    nodes.push(node);
  }
  recurse(root);
  return nodes;
}
</script>

这是 json：

{
 "name": "flare",
 "children": [
  {
   "name": "analytics",
   "children": [
    {
     "name": "cluster",
     "children": [
      {"name": "AgglomerativeCluster", "size": 3938},
      {"name": "CommunityStructure", "size": 3812},
      {"name": "HierarchicalCluster", "size": 6714},
      {"name": "MergeEdge", "size": 743}
     ]
    },
    {
     "name": "graph",
     "children": [
      {"name": "BetweennessCentrality", "size": 3534},
      {"name": "LinkDistance", "size": 5731},
      {"name": "MaxFlowMinCut", "size": 7840},
      {"name": "ShortestPaths", "size": 5914},
      {"name": "SpanningTree", "size": 3416}
     ]
    },
    {
     "name": "optimization",
     "children": [
      {"name": "AspectRatioBanker", "size": 7074}
     ]
    }
   ]
  }
 ]
}

例如，我希望"AspectRatioBanker"可以带我去 www.aspectratiobanker.com。谢谢！

这里有两个选项。

在 SVG 本身中包含a标签。
在单击处理程序中处理操作。

第一个选项是更好的用途，IMO，因为它更具语义性，允许用户看到节点是一个链接，右键单击并复制网址并在新页面中打开它等。

但是，第二个需要对程序进行最少的更改：

// Toggle children on click.
var urlMap = {
    'AspectRatioBanker': 'http://www.google.com'
    // ... more name -> URL mappings
};
function click(d) {
  if (d3.event.defaultPrevented) return; // ignore drag
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else if (d._children) {
    d.children = d._children;
    d._children = null;
  } else {
    // This was a leaf node, so redirect.
    window.location = urlMap[d.name];
  }
  update();
}

相关内容

最新更新

热门标签：