Javascript 如何实现只有完全缩放d3js时才能单击气泡_Javascript_Svg_D3.js_Hyperlink_Circle Pack

Javascript 如何实现只有完全缩放d3js时才能单击气泡

javascript svg d3.js hyperlink

Javascript 如何实现只有完全缩放d3js时才能单击气泡,javascript,svg,d3.js,hyperlink,circle-pack,Javascript,Svg,D3.js,Hyperlink,Circle Pack,我这里有个小问题：我正在使用这个示例（）并修改了 flare.json文件如下： { "name": "flare", "children": [ { "name": "Kommunikation und Umwelt", "children": [ { "name": "Courses", "children": [ { "name": "AO-Psy.", "children": [ {"name": "Prof. A", "size": 5731,"ur

我这里有个小问题：

我正在使用这个示例（）并修改了 flare.json文件如下：

{
  "name": "flare",
"children": [
{
"name": "Kommunikation und Umwelt",
"children": [

{
 "name": "Courses",
 "children": [
  {
   "name": "AO-Psy.",
   "children": [
    {"name": "Prof. A", "size": 5731,"url":"index.html"},
    {"name": "Prof. B", "size": 5731},
    {"name": "Prof. C", "size": 5731}
   ]
  },
  {
   "name": "E&E",
   "children": [
    {"name": "Prof. D", "size": 5731},
    {"name": "Prof. E", "size": 5731},
    {"name": "Prof. F", "size": 5731},
    {"name": "Prof. G", "size": 5731},
    {"name": "Prof. H", "size": 5731}
   ]
  },
  {
   "name": "IBSS",
   "children": [
    {"name": "Prof. I", "size": 5731},
    {"name": "Prof. J", "size": 5731},
    {"name": "Prof. K", "size": 5731}
   ]
  },
  {"name": "", "size": 0},
  {
   "name": "E-Gov",
   "children": [
    {"name": "Prof. L", "size": 5731},
    {"name": "Prof. M", "size": 5731},
    {"name": "Prof. N", "size": 5731}
   ]
  },
  {
   "name": "Muki",
   "children": [
    {"name": "Prof. O", "size": 5731},
    {"name": "Prof. P", "size": 5731},
    {"name": "Prof. Q", "size": 5731},
    {"name": "Prof. V", "size": 5731}
   ]
  },
  {"name": "Schedule", "size": 5731},
  {"name": "News", "size": 5731},
  {"name": "Events", "size": 5731},
  {"name": "Search", "size": 5731},
  {"name": "", "size": 0}
 ]
},
{"name": "", "size": 0}
]
},

如果我点击Prof.A，我会看到下一个html页面。我的问题是，即使我没有放大这个泡沫，我也可以点击A教授。我只想在放大它并且标签可读时点击它

我试图“修复”缩放功能，但似乎没有任何效果

zoom.html：

<!DOCTYPE html>    
<html xmlns:xlink="http://www.w3.org/1999/xlink">
<meta charset="utf-8">
<style>

.node {
cursor: pointer;
}

.node:hover {
stroke: #000;
stroke-width: 1.5px;
}

.node--leaf {
fill: #14DCD2;
}

.label {
 pointer-events: none;
 font: 20px "Helvetica Neue", Helvetica, Arial, sans-serif;
 text-anchor: middle;
 text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
 }

 .label,
 .node--root,
 .node--leaf {
 pointer-events: all;
 }
 .node--leaf:hover {
 fill: orangered;
 }

 </style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
 <script>


var margin = 600,
diameter = 1920;

var color = d3.scale.linear()
.domain([-1, 5])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl);

var pack = d3.layout.pack()
.padding(2)
.size([diameter - margin, diameter - margin])
.value(function(d) { return d.size; })

var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.append("g")
.attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

d3.json("flare.json", function(error, root) {
if (error) return console.error(error);

var focus = root,
  nodes = pack.nodes(root),
  view;

var circle = svg.selectAll("circle")
  .data(nodes)
.enter().append("circle")
  .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
  .style("fill", function(d) { return d.children ? color(d.depth) : null; })
  .on("click", clickFct)

  function clickFct(d,i) {
  if (d3.select(this).classed("node--leaf")) {
    window.open(d.url,"_self"); //open URL here
  } else {
    if (focus !== d) 
    {
        zoom(d); 
        d3.event.stopPropagation();
    }
  }
  }

  var text = svg.selectAll("text")
  .data(nodes)
 .enter().append("text")
  .attr("class", "label")
  .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
  .style("display", function(d) { return d.parent === root ? null : "none"; })
  .text(function(d) { return d.name; })
  //.on('click', function(d, i) {window.location.href = d.url;});

  var node = svg.selectAll("circle,text")

  node.each(function(d){
  var thisNode = d3.select(this);
  if (!d.children) {
    thisNode.append("a")
        .attr("xlink:href", function(d) { return d.url; })
        .append("text")
            .attr("dx", 8)
            .attr("dy", 3)
            .attr("text-anchor", "start")
            .text(function(d) { return d.name; })
            ;
   } else {
    thisNode.append("text")
        .attr("dx", -8)
        .attr("dy", 3)
        .attr("text-anchor", "end")
        .text(function(d) { return d.name; });      
     }

    });




   d3.select("body")
  .style("background", color(-1))
  .on("dblclick", function() { zoom(root); });

   zoomTo([root.x, root.y, root.r * 2 + margin]);

   function zoom(d) {
   var focus0 = focus; focus = d;
   //.attr("xlink:href", url);
   //.on('click', function(d, i) {window.location.href = d.url;});

   var transition = d3.transition()
    .duration(d3.event.altKey ? 7500 : 750)
    .tween("zoom", function(d) {
      var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 4 + margin]);
      return function(t) { zoomTo(i(t)); };
    });

    transition.selectAll("text")
   .filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
    .style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
    .each("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
    .each("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });

    }

    function zoomTo(v) {
    var k = diameter / v[2]; view = v;
    node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
    circle.attr("r", function(d) { return d.r * k; });

    }

     });

     d3.select(self.frameElement).style("height", diameter + "px");

    </script>
    </html>


.节点{
光标：指针；
}
.节点：悬停{
行程：#000；
笔划宽度：1.5px；
}
.node—叶{
填充：#14DCD2；
}
.标签{
指针事件：无；
字体：20px“Helvetica Neue”，Helvetica，Arial，无衬线；
文本锚定：中间；
文本阴影：01px0#fff，1px0#fff，-1px0#fff，0-1px0#fff；
}
.标签，
.node—根，
.node—叶{
指针事件：全部；
}
.node--叶：悬停{
填充：橙色；
}
var保证金=600，
直径=1920；
var color=d3.scale.linear（）
.domain（[-1,5]）
.范围（[“hsl（152,80%，80%），“hsl（228,30%，40%）”）
.插值（d3.插值EHCL）；
var pack=d3.layout.pack（）
.填充（2）
.尺寸（[直径-边距，直径-边距]）
.value（函数（d）{返回d.size；}）
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，直径）
.attr（“高度”，直径）
.附加（“g”）
.attr（“转换”、“平移”（“+diameter/2+”，“+diameter/2+”））；
d3.json（“flare.json”，函数（错误，根）{
if（error）返回控制台。error（error）；
var focus=root，
节点=包.节点（根），
看法
var circle=svg.selectAll（“circle”）
.数据（节点）
.enter（）.append（“圆”）
.attr（“类”，函数（d）{返回d.parent？d.children？”节点“：“节点-节点-叶”：“节点-节点-根”；}）
.style（“fill”，函数（d）{返回d.children？颜色（d.depth）：null；}）
。打开（“单击”，单击FCT）
功能点击FCT（d，i）{
if（d3.select（this.classed（“node--leaf”））{
window.open（d.url，“\u self”）；//在此处打开url
}否则{
如果（焦点！==d）
{
变焦（d）；
d3.event.stopPropagation（）；
}
}
}
var text=svg.selectAll（“文本”）
.数据（节点）
.enter（）.append（“文本”）
.attr（“类别”、“标签”）
.style（“填充不透明度”，函数（d）{return d.parent==root？1:0；}）
.style（“display”，函数（d）{return d.parent==root？null：“none”；}）
.text（函数（d）{返回d.name；}）
//.on（'click'，函数（d，i）{window.location.href=d.url；}）；
var node=svg.selectAll（“圆形，文本”）
节点。每个（功能（d）{
var thisNode=d3。选择（此）；
如果（！d.children）{
thisNode.append（“a”）
.attr（“xlink:href”，函数（d）{return d.url；}）
.append（“文本”）
.attr（“dx”，8）
.attr（“dy”，3）
.attr（“文本锚定”、“开始”）
.text（函数（d）{返回d.name；}）
;
}否则{
thisNode.append（“文本”）
.attr（“dx”，-8）
.attr（“dy”，3）
.attr（“文本锚定”、“结束”）
.text（函数（d）{返回d.name；}）；
}
});
d3.选择（“主体”）
.样式（“背景”，颜色（-1））
.on（“dblclick”，function（）{zoom（root）；}）；
zoomTo（[root.x，root.y，root.r*2+margin]）；
功能缩放（d）{
var focus0=焦点；焦点=d；
//.attr（“xlink:href”，url）；
//.on（'click'，函数（d，i）{window.location.href=d.url；}）；
var transition=d3.transition（）
.持续时间（d3.event.altKey？7500:750）
.tween（“缩放”，功能（d）{
var i=d3.interpolateZoom（视图，[focus.x，focus.y，focus.r*4+边距]；
返回函数（t）{zoomTo（i（t））；}；
});
转换。选择全部（“文本”）
.filter（函数（d）{return d.parent==focus | | this.style.display===“inline”}）
.style（“填充不透明度”，函数（d）{return d.parent==focus？1:0；}）
.each（“开始”，函数（d）{if（d.parent==focus）this.style.display=“inline”}）
.each（“end”，函数（d）{if（d.parent！==focus）this.style.display=“none”；}）；
}
函数zoomTo（v）{
变量k=直径/v[2]；视图=v；
attr（“transform”，函数（d）{return”translate（“+（d.x-v[0]）*k+”，“+（d.y-v[1]）*k+”）；）；
circle.attr（“r”，函数（d）{返回d.r*k；}）；
}
});
d3.选择（self.frameElement）.样式（“高度”，直径+“px”）；

我不能取得任何进展似乎什么都不管用请帮帮我

您可以根据缩放级别动态更改节点的指针事件样式。因此，在

.enter（）

中，当创建节点时，设置

.style（“指针事件”，“无”）

，然后在放大该节点时

d3.select("some css for identifying the node")
 .style("pointer-events", "auto")

根据缩放的方式，这需要进行调整（例如，如果首先单击节点将其放大，然后单击节点打开页面，在这种情况下，您需要更改

.on（“单击”）

行为。如果您希望避免内联样式（并且您应该这样做）您可以让节点的基类具有

指针事件：无一类具有指针事件：自动的可点击，您可以在缩放功能中使用d3.classed（“clickable”，true）
，使点击行为可用。
让我对@Elijah的答案进行一点扩展：
首先，我要从css中删除以下内容：
.node--root,
.node--leaf {
  pointer-events: all;
}

以获得对指针事件的更多控制
接下来，我们向节点添加一些附加类，以便更容易地访问这些节点：
.attr("class", function(d) { return 'depth' + d.depth + ' ' + 
  (d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"); })

因此，每个节点都有一些附加类，如.depth4

现在我们可以直接与节点对话，并根据需要添加/删除指针事件
为了方便起见，我们添加了一个新函数：
function adjustPointerEvents(depth) {
  d3.selectAll('.node').attr('pointer-events', 'none');
  d3.select('.node--root').attr('pointer-events', 'all');
  d3.selectAll('.depth' + (depth + 1)).attr('pointer-events', 'all');
}

（首先删除所有事件，然后将事件添加到节点根目录（以便缩小），然后添加“下一级”的事件）
在init上，我们称之为第2级：
adjustPointerEvents(2);

顺便说一句：这里有一个额外的层（'Kommunikation und Umwelt'和t
function clickFct(d,i) {
  adjustPointerEvents(d.depth);
  ...