我正在尝试使用d3绘制网络图,该图可以首先显示特定的节点,然后单击该节点以展开其他节点,我使用此code我在这里的代码上做了一些更改,它只显示了4个节点中的2个节点,我不知道为什么不显示所有节点并丢失可压缩的属性,请给我帮助。
var root;
var COLLAPSE_LEVEL = 1;
var dataset = {
"nodes": [{
"id": 1708498,
"name": "Chieh-Jen Wang",
"w": 88
}, {
"id": 1710977,
"name": "jan",
"w": 88
}, {
"id": 32944442,
"name": "mike",
"w": 88
},{
"id": 2761079,
"name": "ana",
"w": 88
}],
"edges": [{
"from": 1708498,
"to": 1710977,
"w": 1
}, {
"from": 1708498,
"to": 32944442,
"w": 3
}]
}
var width = 960,
height = 1000;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var force = d3.layout.force()
.size([width, height])
.on("tick", tick)
//gravity(0.2)
.linkDistance(height / 13)
.charge(function(node) {
if (node.type !== 'ORG') return -2000;
return -30;
});
// build the arrow.
svg.append("svg:defs").selectAll("marker")
.data(["end"]) // Different link/path types can be defined here
.enter().append("svg:marker") // This section adds in the arrows
.attr("id", function(d) {
return d;
})
.attr("viewBox", "0 -5 10 10")
.attr("refX", 12)
.attr("refY", 0)
.attr("markerWidth", 9)
.attr("markerHeight", 5)
.attr("orient", "auto")
.attr("class", "arrow")
.append("svg:path")
.attr("d", "M0,-5L10,0L0,5");
var json = dataset;
var edges = [];
json.edges.forEach(function(e) {
var sourceNode = json.nodes.filter(function(n) {
return n.id === e.from;
})[0],
targetNode = json.nodes.filter(function(n) {
return n.id === e.to;
})[0];
edges.push({
source: sourceNode,
target: targetNode,
value: e.Value
});
});
var username="Chieh-Jen Wang";
var userid
var othernode=[]
for(var i=0; i<json.nodes.length; i++) {
if(json.nodes[i].name==="Chieh-Jen Wang"){
userid=json.nodes[i].id;
json.nodes[i].collapsing = 0;
json.nodes[i].collapsed = false;
}
else{
json.nodes[i].collapsing = 1;
json.nodes[i].collapsed = true;
othernode.push(json.nodes[i])
}
}
var link = svg.selectAll(".link");
var node = svg.selectAll(".node");
force.on("tick", function() {
// make sure the nodes do not overlap the arrows
link.attr("d", function(d) {
// Total difference in x and y from source to target
diffX = d.target.x - d.source.x;
diffY = d.target.y - d.source.y;
// Length of path from center of source node to center of target node
pathLength = Math.sqrt((diffX * diffX) + (diffY * diffY));
// x and y distances from center to outside edge of target node
offsetX = (diffX * d.target.radius) / pathLength;
offsetY = (diffY * d.target.radius) / pathLength;
return "M" + d.source.x + "," + d.source.y + "L" + (d.target.x - offsetX) + "," + (d.target.y - offsetY);
});
node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
});
update();
function update(){
var nodes = json.nodes.filter(function(d) {
return d.collapsing == 0;
});
var links = edges.filter(function(d) {
return d.source.collapsing == 0 && d.target.collapsing == 0;
});
force
.nodes(nodes)
.links(links)
.start();
link = link.data(links)
link.exit().remove();
link.enter().append("path")
.attr("class", "link")
.attr("marker-end", "url(#end)");
node = node.data(nodes);
node.exit().remove();
node.enter().append("g")
.attr("class", function(d) {
return "node " + d.type
})
.attr("id",function(d){
return d.id
});
node.append("circle")
.attr("class", "circle")
.attr("id",function(d){
return d.id
})
.attr("r", function(d) {
d.radius = 10;
return d.radius
})
.on("click",function(d){
if(d.id===userid){
for(var i=0; i<json.nodes.length; i++) {
json.nodes[i].collapsing = 0;
json.nodes[i].collapsed = false;
}
}
});
// return a radius for path to use
//make lable for circles
// node.append("text")
//.attr("x", 0)
// .attr("dy", ".35em")
// .attr("text-anchor", "middle")
// .attr("class", "text")
// .text(function(d) {
// return d.name
// });
// On node hover, examine the links to see if their
// source or target properties match the hovered node.
node.on('mouseover', function(d) {
link.attr('class', function(l) {
if (d === l.source || d === l.target)
return "link active";
else
return "link inactive";
});
return tooltip.style("visibility", "visible").text(d.name);
});
// Set the stroke width back to normal when mouse leaves the node.
node.on('mouseout', function() {
link.attr('class', "link");
// we hide our tooltip on "mouseout"
return tooltip.style("visibility", "hidden")
})
.on('click', click)
// we move tooltip during of "mousemove"
.on("mousemove", function() {
return tooltip.style("top", (event.pageY - 30) + "px")
.style("left", event.pageX + "px");
})
function click(d) {
if (!d3.event.defaultPrevented) {
var inc = d.collapsed ? -1 : 1;
recurse(d);
function recurse(sourceNode){
//check if link is from this node, and if so, collapse
edges.forEach(function(l) {
if (l.source.id === sourceNode.id){
l.target.collapsing += inc;
recurse(l.target);
}
});
}
d.collapsed = !d.collapsed;
}
update();
}
}
function tick() {
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; });
t.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; });
}
var toggleColor = (function(){
var currentColor = "black";
return function(){
currentColor = currentColor == "black" ? "red" : "black";
d3.select(this).style("fill", currentColor);
}
})();
var tooltip = d3.select("body")
.append("div")
.attr('class', 'tooltip');
var circles = svg.selectAll("circle");
circles.forEach(function(c){
})
.node {
cursor: pointer;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
fill: black;
}
.node:active{
fill:lightgray;
}
.node .text {
fill: white;
}
.ORG .circle {
fill: #1d3649;
}
.EMR .circle {
fill: #B2D0F5;
stroke: #5596e6;
stroke-dasharray: 3px, 3px;
opacity: .5;
}
.EMR .circle:hover {
fill: #5596e6;
}
.link {
fill: none;
stroke: #eee;
stroke-width: 1.5px;
font: 10px sans-serif;
}
.link.active {
stroke:darkblue;
stroke-width: 4;
}
.arrow {
fill: #666;
}
.arrow.active {
stroke-width: 0 !important;
}
.tooltip {
position: absolute;
z-index: 10;
visibility: hidden;
background-color: lightblue;
text-align: center;
padding: 4px;
border-radius: 4px;
font-weight: bold;
color: black;
}
.doubled { fill: red !important; }
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Force-Directed Graph</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
这里是一个具有您的数据和可折叠属性的演示