When a node has only one child, the size of the line segments is not consistent with other lines. This causes the child (and subsequent children) to be out of vertical alignment with sibling nodes. The problem is visible in the Food example with the Granny Smith Apple.
Also, before reviewing the open issues, I modified the script to support the ignoreSpace parameter in a compatible fashion but using a separate function. My initial attempt incorporated styles as described in one of the other comments, but realised that the 'display: none' styling was being overwritten by the table styles.
The appended diffs resolve the layout and incorporate the ignoreSpace change. I have not used GitHub previously and would like to defer the change to someone who has the tools and more experience. There remain some similar problems in cases where the content of the node extends beyond the boundary of the text area.
Very impressive, easy to integrate plug-in. I needed to review a tree with some thousands of nodes and ended up using this with some Excel to generate the tree.
adinorteylawerteh
commented
6 years ago
When a node has only one child, the size of the line segments is not consistent with other lines. This causes the child (and subsequent children) to be out of vertical alignment with sibling nodes. The problem is visible in the Food example with the Granny Smith Apple.
Also, before reviewing the open issues, I modified the script to support the ignoreSpace parameter in a compatible fashion but using a separate function. My initial attempt incorporated styles as described in one of the other comments, but realised that the 'display: none' styling was being overwritten by the table styles.
The appended diffs resolve the layout and incorporate the ignoreSpace change. I have not used GitHub previously and would like to defer the change to someone who has the tools and more experience. There remain some similar problems in cases where the content of the node extends beyond the boundary of the text area.
Very impressive, easy to integrate plug-in. I needed to review a tree with some thousands of nodes and ended up using this with some Excel to generate the tree.
Comparing files CSS\jquery.jOrgChart.css and ORIGINAL\JQUERY.JORGCHART.CSS * CSS\jquery.jOrgChart.css } .jOrgChart .dot { height : 23px; } .jOrgChart .left { * ORIGINAL\JQUERY.JORGCHART.CSS } .jOrgChart .left {
Comparing files jquery.jOrgChart.js and ORIGINAL\JQUERY.JORGCHART.JS * jquery.jOrgChart.js chartClass : "jOrgChart", ignoreSpace : false, dragAndDrop: false * ORIGINAL\JQUERY.JORGCHART.JS chartClass : "jOrgChart", dragAndDrop: false
* jquery.jOrgChart.js }; function layout(row, state, opts) { if(opts.ignoreSpace) row.css('display', state ? '' : 'none'); else row.css('visibility', state ? '' : 'hidden'); }; var nodeCount = 0; * ORIGINAL\JQUERY.JORGCHART.JS }; var nodeCount = 0;
* jquery.jOrgChart.js var $tr = $this.closest("tr"); $this.css('cursor','n-resize'); if($tr.hasClass('contracted')){ $tr.removeClass('contracted').addClass('expanded'); layout($tr.nextAll("tr"), true, opts); // Update the appropriately so that if the tree redraws collapsed/non-collapsed nodes
* ORIGINAL\JQUERY.JORGCHART.JS
var $tr = $this.closest("tr");
if($tr.hasClass('contracted')){
$this.css('cursor','n-resize');
$tr.removeClass('contracted').addClass('expanded');
$tr.nextAll("tr").css('visibility', '');
// Update the
* jquery.jOrgChart.js }else{ $tr.removeClass('expanded').addClass('contracted'); layout($tr.nextAll("tr"), false, opts); $node.addClass('collapsed'); * ORIGINAL\JQUERY.JORGCHART.JS }else{ $this.css('cursor','s-resize'); $tr.removeClass('expanded').addClass('contracted'); $tr.nextAll("tr").css('visibility', 'hidden'); $node.addClass('collapsed');
* jquery.jOrgChart.js var $linesRow = $("
* jquery.jOrgChart.js .removeClass("top"); } else $linesRow.append($(" ").addClass("line left dot"))
.append($(" ").addClass("line right dot"));
$tbody.append($linesRow);
* ORIGINAL\JQUERY.JORGCHART.JS
.removeClass("top");
$tbody.append($linesRow);
* jquery.jOrgChart.js console.log($node); layout($nodeRow.nextAll('tr'), false, opts); $nodeRow.removeClass('expanded'); * ORIGINAL\JQUERY.JORGCHART.JS console.log($node); $nodeRow.nextAll('tr').css('visibility', 'hidden'); $nodeRow.removeClass('expanded');