javascript - 如何在 d3 圆形包装图中创建链接 (href) 标签？

Question

我正在使用这个示例:http://mbostock.github.io/d3/talk/20111116/pack-hierarchy.html

我对 d3 还很陌生，并且很难将标签(在最大放大级别)链接到外部网站。

Answer 1

以下是我基于同一示例的做法:

  vis.selectAll("circle")
  .data(nodes)
  .enter().append("svg:circle")
  .attr("class", function(d) { return d.children ? "parent" : "child"; })
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })
  .attr("r", function(d) { return d.r; })
  .on("click", function(d) {

    if(typeof d.children === 'undefined' && d  != node){
      vis.selectAll("text")
         .style("pointer-events","all")
         .style("fill","#0000EE")
         .style("font-size","32px")
         .style("cursor","pointer")
         .style("text-decoration","underline")
    }     
    else
    {
      vis.selectAll("text")
         .style("pointer-events","none")
         .style("fill","black")
         .style("font-size","14px")
         .style("text-decoration","none")

    }

    return zoom(node == d ? root : d); 

    });

诀窍是修改CSS以在缩放到最远级别时激活指针事件，然后使用选择文本元素添加点击功能...

vis.selectAll("text")
  .data(nodes)
  .enter().append("svg:text")
  .attr("class", function(d) { return d.children ? "parent" : "child"; })
  .attr("x", function(d) { return d.x; })
  .attr("y", function(d) { return d.y; })
  .attr("dy", ".35em")
  .attr("text-anchor", "middle")
  .style("opacity", function(d) { return d.r > 20 ? 1 : 0; })
  .text(function(d) { return d.name; })
  .on("click",function(d){
    window.location = d.url});

这是带有链接的 json 文件示例

 "name": "NIFA",
 "children": [
  {
   "name": "Developers","url":"http://nifa.org/programs/index.html",
   "children": [
    {"name": "Prairie Gold Homes", "size": 3179,"url":"http://nifa.org/programs/index.html?topic=desc&ovr_ov=-over&prog_name_sent=Prairie+Gold+Homes"},
    {"name": "NebHi-RED", "size": 4060,"url":"http://nifa.org/programs/index.html?topic=desc&ps=choose&prog_name_sent=NebHi-RED"},
    {"name": "CROWN", "size": 4138,"url":"http://nifa.org/programs/index.html?topic=desc&ps=choose&prog_name_sent=CROWN"},
    {"name": "Bingo Bonds", "size": 1690,"url":"http://nifa.org/programs/index.html?topic=desc&ovr_ov=-over&prog_name_sent=BINGO+Bonds"},
    {"name": "SizeEncoder", "size": 1830,"url":"http://nifa.org/programs/index.html?topic=desc&ps=choose&prog_name_sent=Infrastructure+Loan+Guarantee"}
   ]
  },

希望有帮助!