如何实现，泡沫只有可点击如果完全缩放d3js [英] How to achieve that bubbles are only clickable if completly zoomed d3js

问题描述

我有一个小问题：

我使用这个例子（ http://bl.ocks.org/mbostock/7607535 ），我修改了
flare.json文件，如下所示：

  {
name：flare，
children：[
 {
name ，
children：[
 
 {
name：Courses，
children 
name：A，size：5731，url： index.html}，
 {name：Prof. B，size：5731}，
 {name：Prof. C，size：5731} 
] 
}，
 {
name：E& E，
children：[
 {name： D，size：5731}，
 {name：Prof. E，size：5731}，
 {name：Prof.F ：5731}，
 {name：Prof. G，size：5731}，
 {name：Prof. H，size：5731} 
] 
}，
 {
name：IBSS，
children：[
 {name： I，size：5731}，
 {name： J，size：5731}，
 {name： K，size：5731} 
] 
}，
 {name：，size：0}，
 {
name ：E-Gov，
children：[
 {name： L，size：5731}，
 {name： M，size：5731}，
 {name： N，size：5731} 
] 
}，
 {
name：Muki，
children：[
 {name：教授O，size：5731}，
 {name： P，size：5731}，
 {name： Q，size：5731}，
 {name： V，size：5731} 
] 
}，
 {name：Schedule，size：5731} News，size：5731}，
 {name：Events，size：5731}，
 {name：Search，size：5731} 
 {name：，size：0} 
] 
}，
 {name：，size：0} b] 
}，
  

如果我点击Prof.A，我得到我的下一个html页面
我的问题是，我可以点击Prof.A，即使我没有放大在这个泡沫。我只是想要能够点击它，当我放大它，并且标签是可读的。

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

zoom.html ：

 <！DOCTYPE html> 
< html xmlns：xlink =http：//www.w3 .org / 1999 / xlink> 
< meta charset =utf-8> 
< style> 
 
 .node {
 cursor：指针; 
} 
 
 .node：hover {
 stroke：＃000; 
 stroke-width：1.5px; 
} 
 b $ b .node  -  leaf {
 fill：＃14DCD2; 
} 
 
 .label {
 pointer-events：none; 
 font：20pxHelvetica 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 （body）。append（svg）
 .attr（width，'svg'）
 
 var svg = d3.select直径）
 .attr（transform，translate（+ diameter / 2 +，+直径/ 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 ）
 .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;}）
。 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 ）; 
 if（！d.children）{
 thisNode.append（a）
 .attr（xlink：href，function（d）{return d.url;} ）
 .append（text）
 .attr（dx，8）
 .attr（dy，3）
 .attr ，start）
 .text（function（d）{return d.name;}）
; 
} else {
 thisNode.append（text）
 .attr（dx，-8）
 .attr（dy，3）
 .attr（text-anchor，end）
 .text （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;}）
。 {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）{returntranslate（+（dx  -  v [0]）* k +，+（dy  -  v [1]）* k + ）;}）; 
 circle.attr（r，function（d）{return d.r * k;}）; 
 
} 
 
}）; 
 
 d3.select（self.frameElement）.style（height，diameter +px）; 
 
< / script> 
< / html> 
  

我无法取得任何进展似乎无效请帮助我！

解决方案

让我在@ Elijah的答案上展开一些：

首先，位从css：

  .node  -  root，
 .node  -  leaf {
指针事件：all; 
} 
  

，以便更好地控制指针事件。

接下来，我们向节点添加一些额外的类，以便我们更容易地访问这些类：

  .attr（class，function（d）{return'depth'+ d.depth +''+ 
（d.parent？d.children？node：node node--因此，每个节点都有一些额外的节点，每个节点都有一个节点，每个节点都有一个节点 - 节点节点 - 根节点）;}）
  

<类，如 .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'）; 
} 
  

（首先我们删除所有事件，然后将事件添加到node- root back（为了能够缩小），然后我们添加'下一级'的事件））

在init上，我们称之为2级：

  adjustPointerEvents（2）; 
  

顺便说一下：你有一个额外的层（'Kommunikation und Umwelt' 'Courses'），我将微调给你...

我们必须确保我们在上点击：

  function clickFct（d，i）{
 adjustPointerEvents（d.depth）; 
 ... 
  

我们都设置好了。

以下是更新的jsfiddle：小提琴

如上所述，仍然需要一些微调，但我希望我提供一些更多的指针。

I have a little problem here:

I'm working with this example (http://bl.ocks.org/mbostock/7607535) and I modified the flare.json file like this:

{
  "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}
]
},

If I click on Prof.A, I get my next html page. My problem is that I can click on Prof.A even when I haven't zoomed in on this bubble. I just want to be able to click on it when I have zoomed on it and the label is readable.

I tried to "fix" the zoom functions, but nothing seems to work.

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>

I cant make any progress nothing seems to work please help me!

解决方案

Let me expand a bit on @Elijah's answer:

First, I'd remove the following bit from the css:

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

in order to get more control over the pointer-events.

Next, we add some additional class to the nodes so that we can access these more easily:

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

Accordingly, every node has some additional class, like .depth4.

Now we can talk to the nodes, directly and add/remove the pointer-events as needed.

For that, and convenience, we add a new function:

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

(first we remove all events, then we add the events to the node-root back (to be able to zoom out), and then we add the events for the 'next' level))

On init, we call that at level 2:

adjustPointerEvents(2);

By the way: you have some sort of an additional layer there ('Kommunikation und Umwelt' and then 'Courses'), I leave the fine tuning to you...

And we have to make sure we call that on click:

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

And we're all set.

Here's the updated jsfiddle: Fiddle

As mentioned above, some fine tuning is still needed, but I hope I provided some more pointers.

这篇关于如何实现，泡沫只有可点击如果完全缩放d3js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！