Javascript 在d3中鼠标向下隐藏节点
我有一个HTML文件,它读取JSON图形文件并显示在浏览器中Javascript 在d3中鼠标向下隐藏节点,javascript,jquery,d3.js,Javascript,Jquery,D3.js,我有一个HTML文件,它读取JSON图形文件并显示在浏览器中 <!DOCTYPE html> <meta charset="utf-8"> <style> .node { stroke: #fff; stroke-width: 1.5px; } .link { stroke: #999; stroke-opacity: .6; } </style> <body> <script src="//d3js.org
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 1280,
height = 960;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("data.json", function(error, graph) {
if (error) throw error;
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) { return color(d.fill); })
.call(force.drag);
node.append("title")
.text(function(d) { return d.id; });
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
});
</script>
.节点{
冲程:#fff;
笔划宽度:1.5px;
}
.链接{
行程:#999;
笔画不透明度:.6;
}
可变宽度=1280,
高度=960;
var color=d3.scale.category20();
var-force=d3.layout.force()
。收费(-120)
.linkDistance(30)
.尺寸([宽度、高度]);
var svg=d3.选择(“正文”).追加(“svg”)
.attr(“宽度”,宽度)
.attr(“高度”,高度);
d3.json(“data.json”,函数(错误,图形){
如果(错误)抛出错误;
力
.nodes(图.nodes)
.links(graph.links)
.start();
var link=svg.selectAll(“.link”)
.数据(图表.链接)
.enter().append(“行”)
.attr(“类”、“链接”)
.style(“笔划宽度”,函数(d){return Math.sqrt(d.value);});
var node=svg.selectAll(“.node”)
.数据(图.节点)
.enter().append(“圆”)
.attr(“类”、“节点”)
.attr(“r”,5)
.style(“fill”,函数(d){返回颜色(d.fill);})
.呼叫(强制拖动);
node.append(“标题”)
.text(函数(d){返回d.id;});
force.on(“勾号”,函数(){
attr(“x1”,函数(d){返回d.source.x;})
.attr(“y1”,函数(d){返回d.source.y;})
.attr(“x2”,函数(d){返回d.target.x;})
.attr(“y2”,函数(d){返回d.target.y;});
attr(“cx”,函数(d){return d.x;})
.attr(“cy”,函数(d){返回d.y;});
});
});
每个节点都有一个名为
clique\u nodes
的属性,它是需要在mousedown上显示的节点列表(在mousedown上隐藏图形中的每个其他节点)。如何做到这一点?您应该将“mousedown”事件处理程序附加到节点上,在节点上过滤“clique_node”属性并使其不透明度为0
var gnodes = svg.selectAll('g.gnode')
.data(graph.nodes)
.enter()
.append('g')
.classed('gnode', true)
.attr('clique_node', function(d,i){
if(d.attr === "clique_node"){
return true;
}
})
.on("mousedown", function(d,i){
d3.selectAll('.gnode').filter(function(d) {
if(d.attr !== "clique_node"){return d;}
})
.attr("opacity",0);
d3.selectAll('.link').filter(function(d) {
if(d.source.attr !== "clique_node" || d.target.attr !== "clique_node"){return d;}
})
.attr("opacity",0);
});
请参阅fiddle:您应该将“mousedown”事件处理程序附加到节点上,在节点上过滤“clique_node”属性并使其不透明度为0
var gnodes = svg.selectAll('g.gnode')
.data(graph.nodes)
.enter()
.append('g')
.classed('gnode', true)
.attr('clique_node', function(d,i){
if(d.attr === "clique_node"){
return true;
}
})
.on("mousedown", function(d,i){
d3.selectAll('.gnode').filter(function(d) {
if(d.attr !== "clique_node"){return d;}
})
.attr("opacity",0);
d3.selectAll('.link').filter(function(d) {
if(d.source.attr !== "clique_node" || d.target.attr !== "clique_node"){return d;}
})
.attr("opacity",0);
});
查看小提琴:鼠标向下功能触发器在哪里?在节点上还是在svg上?@echonax:mousedown在节点上。。每个节点都有一个节点列表。所有其他节点和边必须在鼠标向下移动时隐藏在该特定节点上。你说每个节点都有一个节点列表是什么意思?作为子节点?@echonax
clique\u nodes
是键,节点列表是值。这些节点将连接到此具有clique\u节点的节点
key@echonax:示例“集团节点”:[1,2,3]
。此外,在mouseup上,隐藏的节点必须再次可见mousedown函数触发器在哪里?在节点上还是在svg上?@echonax:mousedown在节点上。。每个节点都有一个节点列表。所有其他节点和边必须在鼠标向下移动时隐藏在该特定节点上。你说每个节点都有一个节点列表是什么意思?作为子节点?@echonaxclique\u nodes
是键,节点列表是值。这些节点将连接到此具有clique\u节点的节点
key@echonax:示例“集团节点”:[1,2,3]
。此外,在mouseup上,隐藏的节点必须再次可见