我是d3和js的新手
我正在使用d3.js可折叠力布局，其中的图像基于此示例：http://bl.ocks.org/eesur/be2abfb3155a38be4de4
但是我希望从崩溃的所有节点开始。我已经尝试了thread的所有解决方案，但它们无法正常工作。
第二种解决方案根本没有效果。
当我使用第一个解决方案并将子节点更改为_children时，节点的功能会发生变化，而不是扩展，它们会分开。这是截图：https://dl.dropboxusercontent.com/u/38140937/Memory%20site/screenshot/solution2.png
非常感谢任何帮助
答案 0 :(得分：0)
您应该在update函数的初始调用之前更新json数据。
$(function () {
---------------------
---------------------
---------------------
var nodes = flatten(g.data);
nodes.forEach(function(d) {
d._children = d.children;
d.children = null;
});
update();
});
以下是工作代码段。
//Notes:
// Src: http://bl.ocks.org/mbostock/1093130
//Notes:
// * Each dom element is using
// children to store refs to expanded children
// _children to store refs to collapsed children
//* It's using both a tree and a graph layout.
//root
var g = {
data: null,
force: null
};
$(function() {
//use a global var for the data:
g.data = data;
var width = 960,
height = 500;
//Create a sized SVG surface within viz:
var svg = d3.select("#viz")
.append("svg")
.attr("width", width)
.attr("height", height);
g.link = svg.selectAll(".link"),
g.node = svg.selectAll(".node");
//Create a graph layout engine:
g.force = d3.layout.force()
.linkDistance(80)
.charge(-120)
.gravity(0.05)
.size([width, height])
//that invokes the tick method to draw the elements in their new location:
.on("tick", tick);
var nodes = flatten(g.data);
nodes.forEach(function(d) {
d._children = d.children;
d.children = null;
});
//Draw the graph:
//Note that this method is invoked again
//when clicking nodes:
update();
});
//invoked once at the start,
//and again when from 'click' method
//which expands and collapses a node.
function update() {
//iterate through original nested data, and get one dimension array of nodes.
var nodes = flatten(g.data);
//Each node extracted above has a children attribute.
//from them, we can use a tree() layout function in order
//to build a links selection.
var links = d3.layout.tree().links(nodes);
// pass both of those sets to the graph layout engine, and restart it
g.force.nodes(nodes)
.links(links)
.start();
//-------------------
// create a subselection, wiring up data, using a function to define
//how it's suppossed to know what is appended/updated/exited
g.link = g.link.data(links, function(d) {
return d.target.id;
});
//Get rid of old links:
g.link.exit().remove();
//Build new links by adding new svg lines:
g.link
.enter()
.insert("line", ".node")
.attr("class", "link");
// create a subselection, wiring up data, using a function to define
//how it's suppossed to know what is appended/updated/exited
g.node = g.node.data(nodes, function(d) {
return d.id;
});
//Get rid of old nodes:
g.node.exit().remove();
//-------------------
//create new nodes by making groupd elements, that contain circls and text:
var nodeEnter = g.node.enter()
.append("g")
.attr("class", "node")
.on("click", click)
.call(g.force.drag);
//circle within the single node group:
nodeEnter.append("circle")
.attr("r", function(d) {
return Math.sqrt(d.size) / 10 || 4.5;
});
//text within the single node group:
nodeEnter.append("text")
.attr("dy", ".35em")
.text(function(d) {
return d.name;
});
//All nodes, do the following:
g.node.select("circle")
.style("fill", color); //calls delegate
//-------------------
}
// Invoked from 'update'.
// The original source data is not the usual nodes + edge list,
// but that's what's needed for the force layout engine.
// So returns a list of all nodes under the root.
function flatten(data) {
var nodes = [],
i = 0;
//count only children (not _children)
//note that it doesn't count any descendents of collapsed _children
//rather elegant?
function recurse(node) {
if (node.children) node.children.forEach(recurse);
if (!node.id) node.id = ++i;
nodes.push(node);
}
recurse(data);
//Done:
return nodes;
}
//Invoked from 'update'
//Return the color of the node
//based on the children value of the
//source data item: {name=..., children: {...}}
function color(d) {
return d._children ? "#3182bd" // collapsed package
:
d.children ? "#c6dbef" // expanded package
:
"#fd8d3c"; // leaf node
}
// Toggle children on click by switching around values on _children and children.
function click(d) {
if (d3.event.defaultPrevented) return; // ignore drag
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
//
update();
}
//event handler for every time the force layout engine
//says to redraw everthing:
function tick() {
//redraw position of every link within the link set:
g.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;
});
//same for the nodes, using a functor:
g.node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
}
var data =
{
name: "flare",
children: [{
name: "analytics",
children: [{
name: "cluster",
children: [{
name: "AgglomerativeCluster",
size: 3938
}, {
name: "CommunityStructure",
size: 3812
}, {
name: "HierarchicalCluster",
size: 6714
}, {
name: "MergeEdge",
size: 743
}]
}, {
name: "graph",
children: [{
name: "BetweennessCentrality",
size: 3534
}, {
name: "LinkDistance",
size: 5731
}, {
name: "MaxFlowMinCut",
size: 7840
}, {
name: "ShortestPaths",
size: 5914
}, {
name: "SpanningTree",
size: 3416
}]
}, {
name: "optimization",
children: [{
name: "AspectRatioBanker",
size: 7074
}]
}]
}]
};.node circle {
cursor: pointer;
stroke: #3182bd;
stroke-width: 1.5px;
}
.node text {
font: 10px sans-serif;
pointer-events: none;
text-anchor: middle;
}
line.link {
fill: none;
stroke: #9ecae1;
stroke-width: 1.5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="viz" />