0
我需要帮助将JSON数据绑定到基于哪个D3元素被点击的元素上。我的主要问题是，我是D3新手，我不明白如何调用或选择元素。因为它们都是在我的Org树中生成的。点击元素将显示该元素的子元素。我需要的JSON说明一旦这些元素中的一个被点击如何根据点击什么D3.JS元素来绑定数据？
document.addEventListener("DOMContentLoaded", function() {
var margin = {
top: 50,
right: 300,
bottom: 50,
left: 300
},
width = 1280 - margin.right - margin.left,
height = 720 - margin.top - margin.bottom;
var i = 0,
duration = 750,
root;
var tree = d3.layout.tree()
.size([height, width]);
var diagonal = d3.svg.diagonal()
.projection(function(d) {
return [d.y, d.x]; //switch Y and X to complete vertically
});
var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var data = {
"fname":"Title",
"children":[
{
"fname":"Element1",
"children":[
{
"fname":"1. Child",
"desc": "This is my description"
},
{
"fname":"2. Child",
},
{
"fname":"3. Child",
"children":[
{
"fname":"1. SubChild",
},
{
"fname":"2. SubChild",
},
{
"fname":"3. SubChild",
},
{
"fname":"4. SubChild",
},
{
"fname":"5. SubChild",
},
]
},
{
"fname":"4. Child",
},
{
"fname":"5. loanEndCoolOff",
},
{
"fname":"6. Child",
},
{
"fname":"7. Child",
},
{
"fname":"8. Child",
},
{
"fname":"9. Child",
},
{
"fname":"10. Child",
},
{
"fname":"11. Child",
"children":[
{
"fname":"11.1. SubChild",
},
{
"fname":"11.2. SubChild",
},
],
},
{
"fname":"12. Child",
},
]
},
]
}
root = data;
root.x0 = height/2;
root.y0 = 0;
function collapse(d){
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}
root.children.forEach(collapse);
update(root);
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function(d) {
d.y = d.depth * 220; // change to increase/decrease the distance between "limbs"
});
// Update the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function(d) {
return d.id || (d.id = ++i);
});
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")"; //switch Y and X to complete vertically
})
.on("click", click);
// append description
nodeEnter.append("text")
.attr("x", function(d) { return d.children || d._children ? -50 : 50; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.desc; })
.style("fill-opacity", 1e-6);
nodeEnter.append("circle")
.attr("r", 1e-6)
.style("fill", function(d) {
return d._children ? "yellow" : "#fdbd44";
});
nodeEnter.append("text")
.attr("x", function(d) { return d.children || d._children ? -10 : 10; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.fname; })
.style("fill-opacity", 1e-6);
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) {
return "translate(" + d.y + "," + d.x + ")"; //switch Y and X to complete vertically
});
nodeUpdate.select("circle")
.attr("r", 5) //attr changes size of the circle
.style("fill", function(d) { return d._children ? "#fdbf44" : "white"; });
nodeUpdate.selectAll("text")
.style("fill-opacity", 1);
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) {
return "translate(" + source.y + "," + source.x + ")"; //switch Y and X to complete vertically
})
.remove();
nodeExit.select("circle")
.attr("r", 1e-6);
nodeExit.select("text")
.style("fill-opacity", 1e-6);
// Update the links…
var link = svg.selectAll("path.link")
.data(links, function(d) {
return d.target.id;
});
// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", function(d) {
var o = {
y: source.y0,
x: source.x0 //switch Y and X to complete vertically
};
return diagonal({
source: o,
target: o
});
});
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {
y: source.y, //switch Y and X to complete vertically
x: source.x
};
return diagonal({
source: o,
target: o
});
})
.remove();
// Stash the old positions for transition.
nodes.forEach(function(d) {
d.y0 = d.y; //switch Y and X to complete vertically
d.x0 = d.x;
});
}
// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
});