Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/396.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在d3圆形包装图中创建链接(href)标签?_Javascript_Svg_D3.js_Label_Circle Pack - Fatal编程技术网

Javascript 如何在d3圆形包装图中创建链接(href)标签?

Javascript 如何在d3圆形包装图中创建链接(href)标签?,javascript,svg,d3.js,label,circle-pack,Javascript,Svg,D3.js,Label,Circle Pack,我正在使用以下示例: 我对d3非常陌生,很难将标签(在最大放大级别)链接到外部站点。以下是我如何基于相同的示例进行链接的: 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;

我正在使用以下示例:


我对d3非常陌生,很难将标签(在最大放大级别)链接到外部站点。

以下是我如何基于相同的示例进行链接的:

  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以在缩放到最远级别时激活指针事件,然后使用select文本元素插入一个点击函数

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"}
   ]
  },
希望有帮助

你可能想退房;它基于不同的布局,但基本相同。