1
jsonファイル内のd3.hasコンテンツ内のクラスタレイアウトを設計しようとしました。ここではノードの一部が親ノードです。親ノードをクリックすると、私は新しい親ノードを開くときに、excistingノードを閉じたいと思っています。D3クラスタレイアウトデザイン
<!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>
：
は、その後、あなたが以下のようにクリックされたノードを開きます。私はそれが駄目だと思う唯一の人だと思う。私はこれらのグラフレイアウトでも非常に苦労し、解決策を見つけられませんでした。たぶん、d3コミュニティは助けたいと思っていないかもしれません。あるいは、誰も本当にこれらの「ツール」を使用することはできません。 – inf3rno
yes..itsはd3に関連する問題の解決策を得るのが難しいです。 – preetha