0

The below one is set of my piece of code , when i use this code in tree widgets first level of child only displaying and after that i cant able to expand the next child and also next levels are not expanding.         I am mentioning my code here : can any one help me how it will work    function (declare, _WidgetBase, _TemplatedMixin, dom, dojoDom, dojoProp, dojoGeometry, dojoClass, dojoStyle, dojoConstruct, dojoArray, lang, dojoText, dojoHtml, dojoEvent, _jQuery, widgetTemplate, d3) { "use strict";   // var $ = _jQuery.noConflict(true);   var d3 = window.d3;   // Declare widget's prototype. return declare("Mxwidget.widget.Mxwidget", [_WidgetBase, _TemplatedMixin], { // _TemplatedMixin will create our dom node using this HTML template. templateString: widgetTemplate,   body: null, widgetBase: null,   // Internal variables. _handles: null, _contextObj: null,   constructor: function () { this._handles = []; },   postCreate: function () { // logger.debug(this.id + ".postCreate"); },   update: function (obj, callback) { logger.debug(this.id + ".update");   this._contextObj = obj; this._updateRendering(callback); if (typeof callback !== "undefined") { callback(); }   var margin = { top: 20, right: 120, bottom: 20, left: 120 }, width = 960 - margin.right - margin.left, height = 800 - margin.top - margin.bottom;   var root = { "name": "Top Level", "parent": "null", "children": [ { "name": "Level 2: A", "parent": "Top Level", "children": [ { "name": "Son of A", "parent": "Level 2: A" }, { "name": "Daughter of A", "parent": "Level 2: A" } ] }, { "name": "Level 2: B", "parent": "Top Level" } ] };   var i = 0, duration = 750, rectW = 100, rectH = 50; var zm; var tree = d3.layout.tree().size([1000,700]); var diagonal = d3.svg.diagonal() .projection(function (d) { return [d.y + rectW / 2, d.x + rectH / 2]; });   var svg = d3.select("body").append("svg").attr("width", 1000).attr("height", 1000) .call(zm = d3.behavior.zoom().scaleExtent([1, 3]).on("zoom",redraw)).append("g") .attr("transform", "translate(" + 350 + "," + 20 + ")");   //necessary so that zoom knows where to zoom and unzoom from   zm.translate([350, 20]); root.x0 = 0; root.y0 = height / 2; var my = 0;   function collapse(d) { console.info("hello my ") if (d.children) { d._children = d.children; d._children.forEach(collapse); // d._children.forEach(lang.hitch(this,function(i){this.collapse(i);})); d.children = null; } } root.children.forEach(collapse); update(root);   d3.select("body").style("height", "800px");   function update(source) {   // Compute the new tree layout. var nodes = tree.nodes(root).reverse(), links = tree.links(nodes);   // Normalize for fixed-depth. nodes.forEach(function (d) { d.y = d.depth * 180; });   // Update the nodes… var node = svg.selectAll("g.node") .data(nodes, function (d) { return d.id || (d.id = ++i); });   var tem1; // Enter any new nodes at the parent's previous position. var nodeEnter = node.enter().append("g") .attr("class", "node") .attr("transform", function (d) { tem1 = d; console.info("AADHI"); return "translate(" + source.y0 + "," + source.x0 + ")";}) .on('click', lang.hitch(this,function(d) { // block collapse & expand behavior when onClickMF is defined if (!this.onClickMF){ this._click(d); } }));   nodeEnter.append("rect") .attr("width", rectW) .attr("height", rectH) .attr("stroke", "black") .attr("stroke-width", 1) .style("fill", function (d) { return d._children ? "lightsteelblue" : "#fff"; }).on('click', lang.hitch(this,function(d) { // block collapse & expand behavior when onClickMF is defined if (!this.onClickMF){ this._click(d); } }));   nodeEnter.append("text") .attr("x", rectW / 2) .attr("y", rectH / 2) .attr("dy", ".35em") .attr("text-anchor", "middle") .text(function (d) { return d.name; }).on('click', lang.hitch(this,function(d) { // block collapse & expand behavior when onClickMF is defined if (!this.onClickMF){ this._click(d); } }));   // Transition nodes to their new position. var nodeUpdate = node.transition() .duration(duration) .attr("transform", function (d) { return "translate(" + d.y + "," + d.x + ")"; });   // var nodeUpdate = node.attr("transform", d => "translate("+ d.y + "," + d.x + ")").transition().duration(duration);   nodeUpdate.select("rect") .attr("width", rectW) .attr("height", rectH) .attr("stroke", "black") .attr("stroke-width", 1) .style("fill", function (d) { return d._children ? "lightsteelblue" : "#fff"; });   nodeUpdate.select("text") .style("fill-opacity", 1);   // 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 + ")"; }) .remove();   nodeExit.select("rect") .attr("width", rectW) .attr("height", rectH) .attr("stroke", "black") .attr("stroke-width", 1);   nodeExit.select("text");   // Update the links… var link = svg.selectAll("path.link") .data(links, function (d) { return d.target.id; });   // Enter any new links at the parent's previous position. link.enter().insert("path", "g") .attr("class", "link") .attr("x", rectW / 2) .attr("y", rectH / 2) .attr("d", function (d) { var o = { x: source.x0, y: source.y0 }; return diagonal({ source: o, target: o }); });   // Transition links to their new position. link.transition() .duration(duration) .attr("d", diagonal);   // Transition exiting nodes to the parent's new position. link.exit().transition() .duration(duration) .attr("d", function (d) { var o = { x: source.x, y: source.y }; return diagonal({ source: o, target: o }); }) .remove();   // Stash the old positions for transition. nodes.forEach(function (d) { d.y0 = d.y; d.x0 = d.x; }); }   // Toggle children on click.   console.info("passed function click(d)")   //Redraw for zoom function redraw() { console.info("redraw = "+ d3.event.translate + " " + d3.event.scale) svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); } },   resize: function (box) { logger.debug(this.id + ".resize"); },   uninitialize: function () { logger.debug(this.id + ".uninitialize"); },   _updateRendering: function (callback) { logger.debug(this.id + "._updateRendering");   dojoStyle.set(this.domNode, "display", "block");   this._executeCallback(callback, "_updateRendering"); },   _click: function(d) { console.info("passed custom function click ") if (d.children) { d._children = d.children; d.children = null; } else { d.children = d._children; d._children = null; } update(d); },  

asked 2019-07-05

2 answers