add links to tree

This commit is contained in:
j 2018-08-09 18:00:29 +01:00
parent db1fcd8425
commit 84bfde677d

View file

@ -13,7 +13,7 @@ var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; }); .projection(function(d) { return [d.y, d.x]; });
var svg = d3.select("body").append("svg") var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left) .attr("width", "100%")
.attr("height", height + margin.top + margin.bottom) .attr("height", height + margin.top + margin.bottom)
.append("g") .append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
@ -42,6 +42,16 @@ d3.json("sized_ontology.json", function(error, flare) {
d3.select(self.frameElement).style("height", "800px"); d3.select(self.frameElement).style("height", "800px");
function get_color(d) {
if (d.children || d._children) {
return '#fff'
}
if (d.size == 1) {
return "gray";
}
return "lightsteelblue";
}
function update(source) { function update(source) {
// Compute the new tree layout. // Compute the new tree layout.
@ -63,15 +73,22 @@ function update(source) {
nodeEnter.append("circle") nodeEnter.append("circle")
.attr("r", 1e-6) .attr("r", 1e-6)
.style("fill", function(d) { return d.children || d._children ? "#fff": "lightsteelblue"; }); .on("click", click)
.style("fill", get_color)
nodeEnter.append("text") nodeEnter.append("text")
.attr("x", function(d) { return d.children || d._children ? -10 : 10; }) .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
.attr("dy", ".35em") .attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.name; }) .text(function(d) {
if (d.children || d._children || d.size == 1) {
return d.name;
}
return d.name + ' (' + d.size + ')';
})
.style("fill-opacity", 1e-6); .style("fill-opacity", 1e-6);
// Transition nodes to their new position. // Transition nodes to their new position.
var nodeUpdate = node.transition() var nodeUpdate = node.transition()
.duration(duration) .duration(duration)
@ -79,7 +96,7 @@ function update(source) {
nodeUpdate.select("circle") nodeUpdate.select("circle")
.attr("r", 4.5) .attr("r", 4.5)
.style("fill", function(d) { return d.children || d._children ? "#fff": "lightsteelblue"; }); .style("fill", get_color)
nodeUpdate.select("text") nodeUpdate.select("text")
.style("fill-opacity", 1); .style("fill-opacity", 1);
@ -138,5 +155,10 @@ function click(d) {
d.children = d._children; d.children = d._children;
d._children = null; d._children = null;
} }
if (!d.children && ! d._children && d.size > 1) {
var name = d.parent.name + ': ' + d.name
document.location.href = '/clip/created/keywords=' + name
}
update(d); update(d);
} }