logo标签列表

如何实现在完全缩放时才能点击气泡（d3js）

javascriptsvgd3.jshyperlinkcircle-pack
3

我这里有一个小问题：

我正在处理这个例子（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页面。问题在于，即使我没有放大这个气泡，我也可以点击它。我只想在我放大并且标签可读时才能够点击它。
我尝试“修复”缩放功能，但似乎没有什么效果。
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>

我无法取得进展，似乎什么都不起作用，请帮帮我！

你有 JSFiddle 吗？ - Pinguin Dirk
@PinguinDirk 是的，在这里 http://jsfiddle.net/chroth/fkxcvtu9/3/ - Sebastian Kawa
2个回答
2
让我稍微解释一下@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');
}

首先，我们移除所有事件，然后将事件重新添加到节点根（以便缩小视图），最后添加“下一个”级别的事件。

初始化时，我们在第二层调用此函数：

adjustPointerEvents(2);

顺便说一下：您那里有某种额外的层级（'Kommunikation und Umwelt' 然后是 'Courses'），我将调整留给您处理... 而且我们必须确保在点击时调用它。
function clickFct(d,i) {
  adjustPointerEvents(d.depth);
  ...

一切准备就绪。

这是更新后的jsfiddle链接：Fiddle

如上所述，仍需要进行一些微调，但我希望提供了更多的指引。

1
你可以根据缩放级别动态更改节点的pointer-events样式。因此，在创建节点时，可以在.enter()中设置.style("pointer-events", "none")，然后当该节点被缩放时，执行类似以下操作：
d3.select("some css for identifying the node")
 .style("pointer-events", "auto")

根据缩放方式的不同，这需要进行调整（例如，如果首次单击节点将其缩放，然后再单击节点打开页面，则需要更改.on("click")行为。如果您想避免内联样式（并且应该避免），则可以使节点的基本类具有pointer-events: none，一个名为clickable的类具有pointer-events: auto，并且您可以在缩放函数中使用d3.classed("clickable", true)以使单击行为可用。
现在似乎不起作用了，什么都无法点击，我也无法缩放。可能是我做错了什么。 - Sebastian Kawa
你能给我一个例子，在哪里改变所有东西吗？ - Sebastian Kawa
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接