Javascript D3集群布局设计
我试图在d3中设计集群布局。json文件中有内容。这里的一些节点是父节点。当我单击父节点时。它显示子节点。我想在打开新父节点时关闭激活节点。知道吗Javascript D3集群布局设计,javascript,d3.js,Javascript,D3.js,我试图在d3中设计集群布局。json文件中有内容。这里的一些节点是父节点。当我单击父节点时。它显示子节点。我想在打开新父节点时关闭激活节点。知道吗 <!DOCTYPE html> <html> <head> <title>Radial Cluster Demo</title> <script src="ddd.js"></script> <script
<!DOCTYPE html>
<html>
<head>
<title>Radial Cluster Demo</title>
<script src="ddd.js"></script>
<script src="q.js"></script>
<style>
.node circle {
fill: #fff;
stroke: black;
stroke-width: 1.5px;
}
text:hover {
fill: red;
}
.node {
cursor: pointer;
font: 10px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
div#tooltip {
color: black;
background: orange;
// opacity:1;
// padding:5px;
}
</style>
</head>
<body>
<div id="tooltip" style="display:none"></div>
<div id="viz" class="dd"></div>
<script>
var width = $(document).width();
var height = $(document).height();
</script>
<script type="text/javascript">
var radius = 600 / 2;
var cluster = d3.layout.cluster()
.size([360, radius - 120])
// .separation(function (a, b) {
// return (a.parent == b.parent ? 1 : 10) / a.depth;
//});
var diagonal = d3.svg.diagonal.radial()
.projection(function(d) {
return [d.y, d.x / 180 * Math.PI];
});
var svg = d3.select("body").append("svg")
.attr("width", radius * 2)
.attr("height", radius * 2)
// .attr("width", width *2 )
// .attr("height", height*4)
.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")");
var data = {
"name": "அகல்",
"children": [{
"name": "விலகு",
"color": "red"
}, {
"name": "நீங்கு",
"color": "red",
"l": "red",
"f": "360",
"t": "நீங்குதல், பாயிருளகல (புறநா.25).",
"children": [{
"name": "விலகு",
"color": "red"
}, {
"name": "பின்னிடு",
"color": "red"
}, {
"name": "ஒதுங்கு",
"color": "red"
}, {
"name": "இடம்விட்டுப் பெயர்",
"color": "red"
}, {
"name": "பிரி",
"color": "red"
}, {
"name": "பின்வாங்கு",
"color": "red"
}]
}, {
"name": "பிரி",
"color": "red",
"t": "பிரிதல். அகன்ற பூங்கொடியை (பாரத.குரு.79)"
}, {
"name": "கட",
"color": "#1E90FF",
"t": "கடத்தல். (திவா.)"
}, {
"name": "விருத்தியடை",
"color": "green",
"t": "விருத்தியடைதல் (குறள்,170.)"
}, {
"name": "விசாலி",
"color": "#00C957",
"t": "விசாலித்தல். (புறநா.3,16.)"
}, {
"name": "நீட்டு",
"color": "#00C957"
}, {
"name": "விரி",
"color": "#00C957"
}, {
"name": "பரப்பு",
"color": "#00C957"
}, {
"name": "விரிவு",
"color": "#00C957"
}, {
"name": "விளக்குத் தகழி",
"color": "#D15FEE",
"t": "விளக்குத் தகழி. திருவிளக்குத்
திரியிட்டங் ககல்பரப்பி (பெரியபு.கலிய.15)."
}, {
"name": "சட்டி",
"color": "orange",
"l": "red",
"f": "360",
"t": "சட்டி. காரகற்கூவியன் (பெரும்பாண். 377)",
"children": [{
"name": "மட்பாண்டம்",
"color": "red"
}, {
"name": "உலோகத்தட்டு",
"color": "red"
}, {
"name": "திதி",
"color": "green"
}, {
"name": "அறுபது",
"color": "orange"
}, {
"name": "தாமரை",
"color": "purple"
}, {
"name": "அழித்தல்",
"color": "brown"
}, {
"name": "கொல்லுதல்",
"color": "brown"
}]
}, {
"name": "ஓர் அளவு",
"color": "blue",
"t": "ஓர் அளவு. (தொல்.எழுத்.170,உரை.)"
}, {
"name": "வெள்வேல்",
"color": "maroon",
"t": "(சங்.அக.)"
}, {
"name": "உள்ளூர்",
"color": "purple",
"t": "(பொதி. நி.) "
}, {
"name": "ஊரின் உட்புறம்",
"color": "purple",
"t": "ஊரின் உட்புறம். (பொதி. நி.)"
}, {
"name": "நாடு",
"color": "brown",
"l": "red",
"f": "360",
"t": "நாடு. (பொதி. நி.)",
"children": [{
"name": "தேடு",
"color": "red"
}, {
"name": "ஆராய்",
"color": "red"
}, {
"name": "தெரி",
"color": "red"
}, {
"name": "அள",
"color": "red"
}, {
"name": "கிட்டு",
"color": "red"
}, {
"name": "விரும்பு",
"color": "green"
}, {
"name": "நினை",
"color": "green"
}, {
"name": "மோப்பம்பிடி",
"color": "green"
}, {
"name": "தேசம்",
"color": "purple"
}, {
"name": "இடம்",
"color": "purple"
}, {
"name": "பூமி",
"color": "purple"
}, {
"name": "இராச்சியம்",
"color": "purple"
}, {
"name": "நாட்டுப்புறம்",
"color": "purple"
}, {
"name": "உலகம்",
"color": "purple"
}, {
"name": "மருதநிலம்",
"color": "purple"
}, {
"name": "பக்கம்",
"color": "orange"
}, {
"name": "8 பதுமம்",
"color": "blue"
}]
}, {
"name": "8 பதுமம்",
"color": "maroon"
}]
};
//var tooltip = d3.select("body").append("div")
// .attr("class", "tooltip")
// .style("opacity", 0)
//.style("background",'#BCC5F7');
function update(root) {
var nodes = cluster.nodes(root);
svg.selectAll("path.link").remove();
svg.selectAll("g.node").remove();
var link = svg.selectAll("path.link")
.data(cluster.links(nodes))
.enter().append("path")
.attr("class", "link")
.attr("d", diagonal)
.style("stroke-width", "0.7px")
.style("fill", function(d) {
return d.color;
})
.style("stroke", function(d) {
return d.target.color;
});
var node = svg.selectAll("g.node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
// .attr("transform",
"translate(" + radius / 2 + "," + radius / 2 + ")")
.attr("transform", function(d) {
return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")";
})
node.append("circle")
.style("stroke", function(d) {
return d.color;
})
.style("fill", "none")
.attr("r", 4.5).style("fill", function(d) {
return d._children ? "red" : "#fff";
}).on("click", click);
node.append("text")
.attr("class", "text")
.style("stroke", "0.4px")
.on("mouseover", function(d) {
var r = // d3.select(this).node();
d3.select("div#tooltip")
.style("display", "inline")
// .style("top", (r.top-25) + "px")
// .style("top", 100 + "px")
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 80) + "px")
// .style("left", r.left + "px")
// .style("left", + "px")
.style("position", "absolute")
.text(d.t);
})
.on("mouseout", function() {
d3.select("div#tooltip").style("display", "none")
})
.attr("dy", ".32em") //.style("fill", function(d) { return d.l; })
.attr("text-anchor", function(d) {
return d.x < 180 ? "start" : "end";
})
.attr("transform", function(d) {
return d.x < 180 ?
"translate(8)" : "rotate(180)translate(-10)"; //270 10
})
.text(function(d) {
return d.name
});
}
update(data);
function sortTree() {
tree.sort(function(a, b) {
return b.name.toLowerCase() < a.name.toLowerCase() ? 1 : -1;
});
}
// Sort the tree initially incase the JSON isn't in a sorted order.
sortTree();
function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}
data.children.forEach(collapse);
update(data);
function click(d) {
if (!d.parent) {
return;
}
if (!d.children)
data.children.forEach(collapse);
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
// d3.select(self.frameElement).style("height", width);
update(data);
if (d.parent) {
//d3.selectAll("link").style("length",500);
//d3.select("text") .style("fill", function(d)
{ return d.l; })//.attr('transform', 'rotate(270)');
//.attr("transform", function (d) {
// return d.x < 180 ?
"translate(8)" : "rotate(180)translate(-10)";
// })
return;
}
}
</script>
</body>
</html>
径向簇演示
.节点圆{
填充：#fff；
笔画：黑色；
笔划宽度：1.5px；
}
文本：悬停{
填充物：红色；
}
.节点{
光标：指针；
字体：10px无衬线；
}
.链接{
填充：无；
冲程：#ccc；
笔划宽度：1.5px；
}
div#工具提示{
颜色：黑色；
背景：橙色；
//不透明度：1；
//填充物：5px；
}
var width=$（文档）.width（）；
var height=$（document.height（）；
var半径=600/2；
var cluster=d3.layout.cluster（）
.尺寸（[360，半径-120]）
//.分离（功能（a、b）{
//返回（a.parent==b.parent？1:10）/a.depth；
//});
var diagonal=d3.svg.diagonal.radial（）
.投影（功能（d）{
返回[d.y，d.x/180*Math.PI]；
});
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，半径*2）
.attr（“高度”，半径*2）
//.attr（“宽度”，宽度*2）
//.attr（“高度”，高度*4）
.附加（“g”）
.attr（“变换”、“平移”（“+radius+”，“+radius+”））；
风险值数据={
“名称”：அகல்",
“儿童”：[{
“名称”：விலகு",
“颜色”：“红色”
}, {
“名称”：நீங்கு",
“颜色”：“红色”，
“l”：“红色”，
“f”：“360”，
“t”：நீங்குதல், பாயிருளகல (புறநா.25).",
“儿童”：[{
“名称”：விலகு",
“颜色”：“红色”
}, {
“名称”：பின்னிடு",
“颜色”：“红色”
}, {
“名称”：ஒதுங்கு",
“颜色”：“红色”
}, {
“名称”：இடம்விட்டுப் பெயர்",
“颜色”：“红色”
}, {
“名称”：பிரி",
“颜色”：“红色”
}, {
“名称”：பின்வாங்கு",
“颜色”：“红色”
}]
}, {
“名称”：பிரி",
“颜色”：“红色”，
“t”：பிரிதல். அகன்ற பூங்கொடியை (பாரத.குரு.79)"
}, {
“名称”：கட",
“颜色”：“1E90FF”，
“t”：கடத்தல். (திவா.)"
}, {
“名称”：விருத்தியடை",
“颜色”：“绿色”，
“t”：விருத்தியடைதல் (குறள்,170.)"
}, {
“名称”：விசாலி",
“颜色”：“#00C957”，
“t”：விசாலித்தல். (புறநா.3,16.)"
}, {
“名称”：நீட்டு",
“颜色”：“#00C957”
}, {
“名称”：விரி",
“颜色”：“#00C957”
}, {
“名称”：பரப்பு",
“颜色”：“#00C957”
}, {
“名称”：விரிவு",
“颜色”：“#00C957”
}, {
“名称”：விளக்குத் தகழி",
“颜色”：“费用”，
“t”：விளக்குத் தகழி. திருவிளக்குத்
திரியிட்டங் ககல்பரப்பி (பெரியபு.கலிய.15)."
}, {
“名称”：சட்டி",
“颜色”：“橙色”，
“l”：“红色”，
“f”：“360”，
“t”：சட்டி. காரகற்கூவியன் (பெரும்பாண். 377)",
“儿童”：[{
“名称”：மட்பாண்டம்",
“颜色”：“红色”
}, {
“名称”：உலோகத்தட்டு",
“颜色”：“红色”
}, {
“名称”：திதி",
“颜色”：“绿色”
}, {
“名称”：அறுபது",
“颜色”：“橙色”
}, {
“名称”：தாமரை",
“颜色”：“紫色”
}, {
“名称”：அழித்தல்",
“颜色”：“棕色”
}, {
“名称”：கொல்லுதல்",
“颜色”：“棕色”
}]
}, {
“名称”：ஓர் அளவு",
“颜色”：“蓝色”，
“t”：ஓர் அளவு. (தொல்.எழுத்.170,உரை.)"
}, {
“名称”：வெள்வேல்",
“颜色”：“栗色”，
“t”：(சங்.அக.)"
}, {
“名称”：உள்ளூர்",
“颜色”：“紫色”，
“t”：(பொதி. நி.) "
}, {
“名称”：ஊரின் உட்புறம்",
“颜色”：“紫色”，
“t”：ஊரின் உட்புறம். (பொதி. நி.)"
}, {
“名称”：நாடு",
“颜色”：“棕色”，
“l”：“红色”，
“f”：“360”，
“t”：நாடு. (பொதி. நி.)",
“儿童”：[{
“名称”：தேடு",
“颜色”：“红色”
}, {
“名称”：ஆராய்",
“颜色”：“红色”
}, {
“名称”：தெரி",
“颜色”：“红色”
}, {
“名称”：அள",
“颜色”：“红色”
}, {
“名称”：கிட்டு",
“颜色”：“红色”
}, {
“名称”：விரும்பு",
“颜色”：“绿色”
}, {
“名称”：நினை",
function click(d) {
//this collapse all the open nodes, if the clicked node is opened
if(!d.children)
data.children.forEach(collapse);
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(data);
}