本文介绍了如何实现，泡沫只有可点击如果完全缩放d3js的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个小问题：
我使用这个例子（），我修改了
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 theflare.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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！