From d6ebcff5537689e70090b5b72dd78f6aaba8acba Mon Sep 17 00:00:00 2001 From: Sami Mokaddem Date: Mon, 27 Aug 2018 09:58:36 +0000 Subject: [PATCH] Object in tree are now displayed as hexagon + better input parsing --- static/js/treeFromJson.js | 110 ++++++++++++++++++++++++++------------ 1 file changed, 75 insertions(+), 35 deletions(-) diff --git a/static/js/treeFromJson.js b/static/js/treeFromJson.js index afc1414..b1e35c3 100644 --- a/static/js/treeFromJson.js +++ b/static/js/treeFromJson.js @@ -119,7 +119,6 @@ } // Normalize for fixed-depth. (+ consider linkname) - //nodes.forEach(function(d) { d.y = d.depth * 100; }); nodes.forEach(function(d) { let offset = maxSizePerDepth[d.depth]*(that.options.maxCharDisplay-2); d.y = d.depth * 100 + offset; @@ -142,23 +141,36 @@ nodeEnter.attr("class", "node nodeNoInteraction"); } - var nodeEnterNotArray = nodeEnter.filter(function(d) { + var nodeEnterLeaf = nodeEnter.filter(function(d) { + var not_add = d.additionalNode === undefined || !d.additionalNode; + var is_leaf = d.children === undefined || d.children.length == 0; + return not_add && is_leaf; + }); + var nodeEnterObject = nodeEnter.filter(function(d) { var not_add = d.additionalNode === undefined || !d.additionalNode; var not_arr = d.children === undefined || d.children[0].linkname === undefined || d.children[0].linkname !== ''; - return not_add && not_arr; - }); - nodeEnterNotArray - .append("circle") - .attr("r", 1e-6) - .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); - + var is_obj = d.children !== undefined && d.children[0].linkname !== undefined && d.children[0].linkname !== ''; + return not_add && not_arr && is_obj; + }); var nodeEnterArray = nodeEnter.filter(function(d) { var not_add = d.additionalNode === undefined || !d.additionalNode; var not_arr = d.children === undefined || d.children[0].linkname === undefined || d.children[0].linkname !== ''; - return not_add && !not_arr; + return not_add && !not_arr; }); + + // svg style + nodeEnterLeaf + .append("circle") + .attr("r", 1e-6) + .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); + + nodeEnterObject + .append("polygon") + .attr("points", this.getPointsHexagon(0)) + .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); + nodeEnterArray - .append("rect") + .append("rect") .attr("width", 0) .attr("height", 0) .attr("y", 0) @@ -181,6 +193,9 @@ .attr("r", 10) .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); + nodeUpdate.select("polygon") + .attr("points", this.getPointsHexagon(11.5)) + nodeUpdate.select("rect") .attr("width", 20) .attr("height", 20) @@ -198,6 +213,9 @@ nodeExit.select("circle") .attr("r", 1e-6); + nodeExit.select("polygon") + .attr("points", this.getPointsHexagon(0)); + nodeExit.select("rect") .attr("width", 0) .attr("height", 0) @@ -351,6 +369,7 @@ // select all nodes matching the clicked element var resCircle; var resRect; + var resHexa; if (clicked.data()[0].children === undefined) { // is leaf resCircle = that.svg.selectAll(".node circle") .filter(function(d) { @@ -358,22 +377,27 @@ return false; } var c1 = d.depth == o_depth; - //var c2 = d.parent.id - c_index -1 == d.id; - var c21 = d.parent.id - c_index -1 == d.id + var c2_childIndexMatch = d.parent.id - c_index -1 == d.id + // is label + var c2_isLabel = !Number.isInteger(c_index) && (typeof c_index === 'string'); + // consider linkname if label has been picked manually let il_last = that.instructions.labels.length-1; var labelIsManual = that.instructions.labels[il_last] != 'l'; - var c22 = true; + var c2_manualLabelMatch = true; if (labelIsManual) { - c22 = d.linkname === c_index; + c2_manualLabelMatch = d.linkname === c_index; } else { + //c2_manualLabelMatch = false; } - var c2 = c21 || c22; + + var c2 = (c2_childIndexMatch && !c2_isLabel) || (c2_manualLabelMatch && c2_isLabel); var notClicked = d.id != c_id; return c1 && c2; }); - } else { + + } else { // children may be leaves // check if children are leaf var child = clicked.data()[0].children[0]; if (that.isObject(child) || Array.isArray(child)) { // children are not leaves @@ -408,10 +432,13 @@ resText.style('fill', that.should_invert_text_color(itemColor) ? 'white' : 'black'); - resCircle = that.svg.selectAll(".node circle") + resCircle = that.svg.selectAll(".node polygon, .node circle") .filter(function(d) { - return d.parent.depth == clicked.data()[0].depth; - //return d.parent !== null && d.parent.id == clicked.data()[0].id; + if (d.parent === undefined || d.parent === null) { + return d.id == clicked.data()[0].id; + } else { + return d.parent.depth == clicked.data()[0].depth; + } }); var nodesData = []; if(resCircle !== undefined) { @@ -435,15 +462,6 @@ this.add_instruction(instructions); return; - //let source = clicked.data()[0]; - //let target = child; - //if (target.linkname !== undefined && target.linkname !== '') { - // var resL = this.svg.selectAll("path.link").filter(function(d) { - // return d.source.id == source.id && d.target.id == target.id; - // }); - // that.clickLabel(resL.data()[0]); - //} - //return; } else { // children are leaves resCircle = that.svg.selectAll(".node circle") .filter(function(d) { @@ -618,6 +636,12 @@ instruction = instruction !== null ? instruction : prevVal; mapping.unshift(instruction); } + + // if no path found, we are at the root -> need to iterate + if (mapping.length == 0) { + mapping.push('l'); + } + return mapping; }, @@ -778,6 +802,14 @@ var l = this.instructions.labels; var v = this.instructions.values; var d = this.instructions.dates; + + // convert integer index into {index} + for (var i=0; i maxWidth) { var addNode = {}; var remaining = root.length - maxWidth; - //addNode.name = ''+remaining+'...'; addNode.name = '['+remaining+' more]'; addNode.parent = null; addNode.additionalNode = true; @@ -924,8 +953,7 @@ } if (Object.keys(root).length > maxWidth) { var addNode = {}; - var remaining = root.length - maxWidth; - //addNode.name = ''+remaining+' ...'; + var remaining = Object.keys(root).length - maxWidth; addNode.name = '['+remaining+' more]'; addNode.parent = null; addNode.additionalNode = true; @@ -938,6 +966,18 @@ return child; }, + getPointsHexagon: function(size) { + let pts = [ + 0+','+size, + size*0.87 + ',' + size*0.5, + size*0.87 + ',' + -size*0.5, + 0 + ',' + -size, + -size*0.87 + ',' + -size*0.5, + -size*0.87 + ',' + size*0.5, + ]; + return pts.join(', '); + }, + syntaxHighlightJson: function(json) { if (typeof json == 'string') { json = JSON.parse(json);