From 1d3eb5f37869227726acfc044d68043df44c7773 Mon Sep 17 00:00:00 2001 From: j Date: Sat, 11 Aug 2018 22:10:14 +0200 Subject: [PATCH] formating --- static/ontology/index.css | 5 ++++ static/ontology/index.html | 2 +- static/ontology/index.js | 57 ++++++++++++++++++++++++++------------ 3 files changed, 46 insertions(+), 18 deletions(-) diff --git a/static/ontology/index.css b/static/ontology/index.css index e821750..dc61099 100644 --- a/static/ontology/index.css +++ b/static/ontology/index.css @@ -1,3 +1,8 @@ +body { + margin: 0; + padding: 0; +} + .node circle { fill: #fff; stroke: steelblue; diff --git a/static/ontology/index.html b/static/ontology/index.html index b77ac0e..eda477c 100644 --- a/static/ontology/index.html +++ b/static/ontology/index.html @@ -3,7 +3,7 @@ - + Ontology Tree diff --git a/static/ontology/index.js b/static/ontology/index.js index a9ced24..bcab5a4 100644 --- a/static/ontology/index.js +++ b/static/ontology/index.js @@ -1,7 +1,12 @@ -var margin = {top: 20, right: 120, bottom: 20, left: 120}, - width = 1200 - margin.right - margin.left, - height = 4000 - margin.top - margin.bottom; - +var margin = { + top: 20, + right: 120, + bottom: 20, + left: 120 + }, + width = 3000 - margin.right - margin.left, + height = window.innerHeight - margin.top - margin.bottom; + var i = 0, duration = 750, root; @@ -13,13 +18,13 @@ var diagonal = d3.svg.diagonal() .projection(function(d) { return [d.y, d.x]; }); var svg = d3.select("body").append("svg") - .attr("width", "100%") + .attr("width", width) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); -d3.json("sized_ontology.json", function(error, flare) { - root = flare; +d3.json("sized_ontology.json", function(error, nodes) { + root = nodes; root.x0 = height / 2; root.y0 = 0; @@ -40,7 +45,11 @@ d3.json("sized_ontology.json", function(error, flare) { update(root); }); -d3.select(self.frameElement).style("height", "800px"); +function resize() { + root.x0 = height / 2; + root.y0 = 0; + update(root); +} function get_color(d) { @@ -60,12 +69,16 @@ function update(source) { // Update the nodes… var node = svg.selectAll("g.node") - .data(nodes, function(d) { return d.id || (d.id = ++i); }); + .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 + ")"; }) + .attr("transform", function(d) { + return "translate(" + source.y0 + "," + source.x0 + ")"; + }) .on("click", click); nodeEnter.append("circle") @@ -73,9 +86,13 @@ function update(source) { .style("fill", get_color) 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("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) { if (d.children || d._children) { return d.name; @@ -88,7 +105,9 @@ function update(source) { // Transition nodes to their new position. var nodeUpdate = node.transition() .duration(duration) - .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); + .attr("transform", function(d) { + return "translate(" + d.y + "," + d.x + ")"; + }); nodeUpdate.select("circle") .attr("r", 4.5) @@ -100,7 +119,9 @@ function update(source) { // 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 + ")"; }) + .attr("transform", function(d) { + return "translate(" + source.y + "," + source.x + ")"; + }) .remove(); nodeExit.select("circle") @@ -111,7 +132,9 @@ function update(source) { // Update the links… var link = svg.selectAll("path.link") - .data(links, function(d) { return d.target.id; }); + .data(links, function(d) { + return d.target.id; + }); // Enter any new links at the parent's previous position. link.enter().insert("path", "g") @@ -158,7 +181,7 @@ function click(d) { url = '/clip/created/keywords==' + d.name } window.open(url, '_blank'); + } else { + update(d); } - update(d); } -