如何实现气泡只有在完全缩放 d3js 时才可点击

Question

我这里有个小问题：

我正在使用这个示例 (http://bl.ocks.org/mbostock/7607535) 并且我修改了 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 页面。我的问题是，即使我没有放大此气泡，我也可以单击 Prof.A。我只想在放大它并且标签可读时能够单击它。

我尝试 "fix" 缩放功能，但似乎没有任何效果。

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>

我无法取得任何进展似乎没有任何工作请帮助我！

Answer 1

您可以根据缩放级别动态更改节点的指针事件样式。因此，在您的 .enter() 中创建节点时设置 .style("pointer-events", "none") 然后当该节点放大时，类似于

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

根据您进行缩放的方式，这需要进行调整（例如，如果首先单击节点将其放大，然后单击该节点打开页面，在这种情况下你需要改变 .on("click") 行为。如果你想避免内联样式（你应该），你可以让你的节点的基础 class 有 pointer-events: none a class of clickable 其中有 pointer-events: auto，您可以在缩放功能中使用 d3.classed("clickable", true) 来实现点击行为。

Answer 2

让我扩展一下@Elijah 的回答：

首先，我将从 css 中删除以下位：

.node--root,
.node--leaf {
  pointer-events: all;
}

为了更好地控制指针事件。

接下来，我们向节点添加一些额外的 class 以便我们可以更轻松地访问这些节点：

.attr("class", function(d) { return 'depth' + d.depth + ' ' + 
  (d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"); })

因此，每个节点都有一些额外的 class，例如 .depth4。

现在我们可以直接与节点对话，并根据需要 add/remove 指针事件。

为此，为了方便起见，我们添加了一个新函数：

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

（首先我们删除所有事件，然后我们将事件添加到节点根后面（以便能够缩小），然后我们添加 'next' 级别的事件））

在初始化时，我们在第 2 级调用它：

adjustPointerEvents(2);

顺便说一句：你那里有某种额外的层（'Kommunikation und Umwelt' 然后是 'Courses'），我把微调留给你......

而且我们必须确保在 click:

上调用它

function clickFct(d,i) {
  adjustPointerEvents(d.depth);
  ...

一切就绪。

这是更新后的 jsfiddle：Fiddle

如前所述，还需要做一些微调，希望多多指教。

如何实现气泡只有在完全缩放 d3js 时才可点击

How to achieve that bubbles are only clickable if completly zoomed d3js

javascript

svg

d3.js

hyperlink

circle-pack