Skip to Content

Archived discussions are read-only. Learn more about SAP Q&A

DS SDK : Expand hierarchy in visualization

Hello,

I'm working my way through some D3 visualizations and have managed to get a tree diagram working thanks to this example:

http://www.d3noob.org/2014/01/tree-diagrams-in-d3js_11.html

The visualization takes a dimension object with an activated hierarchy and renders it like this:

With a crosstab component I can get the tree to expand:

Now I want to extend this to function like the Collapsible Tree from Mike Bostock:

http://bl.ocks.org/mbostock/4339083

I've incorporated the transitions from the update function, which all work well, but the problem comes with the click event, which is handled in the D3 code with this function:

// Toggle children on click.
function click(d) {
  if (d.children) {
  d._children = d.children;
  d.children = null;
  } else {
  d.children = d._children;
  d._children = null;
  }
  update(d);

This is called in the update function when the nodes are declared:

        // Declare the nodes

        var node = svg.selectAll("g.node")

        .data(nodes)

        .enter().append("g")

        .attr("class", "node")

        .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

        .on("click", click);

I can see the event being fired, and d._children being switched with d.children, but nothing happens in my visualization. I even tried modifying the function to set the metadata property nodeState, hoping this would alter the datasource, but to no avail:

            function click(d) {

            if (d.children) {

              d._children = d.children;

              d.children = null;

              if (d.nodeState)

              {d.nodeState = "EXPANDED";}

            } else {

              d.children = d._children;

              d._children = null;

              if (d.nodeState)

              {d.nodeState = "COLLAPSED";}

            }

            update(d);

          }

In the console, I can see the property d.nodeState change from EXPANDED to COLLAPSED when I set the appropriate break point, but nothing changes in the viz

I'm guessing I need to do something differently to interact with the data source and change it's state but I couldn't find anything in the guide. Unfortunately, the Simple Crosstab sample doesn't provide the expand/collapse functionality either, though it does render the plus signs that indicate a hierarchy node is available.

Any ideas on how I can add this interactivity to my extension would be very welcome.

Thanks,

Jim

Tags:
Former Member
replied

Hi Jim,

I had a look at your source code and changed some lines – now you get at least no error
message complaining about collapse or expand while using the ZTL functions.

What you still have to do is to avoid a reload and repaint of the tree after
selecting a component in the this.afterupdate function (or at least avoid a full repaint).

This solution works with Design Studio 1.4 only (because of the use of this.getDataSource() and the not visible ScriptText element!!

I made the following changes in your ...

contribution.ztl file:

 

/*
Returns the Dimension Key containing the hierarchy of the datasource. */
     
String getHierarchyDimensionKey() {*
          
     return this.dimHierarchy;
  
*}


/* Expand the hierarchy */
  
@Visibility(private)
    
void expandHierarchyNode() {*

     this.getDataSource().expandNode(this.getHierarchyDimensionKey(),
     this.getSelectedNodeKey());

*}

 
/* Collapse the hierarchy */
    
@Visibility(private)
   
void collapseHierarchyNode() {*
         
     this.getDataSource().collapseNode(this.getHierarchyDimensionKey(),
     this.getSelectedNodeKey());

*}

In the metadata-tree-converter.js

/**

     * Finds the dimension with hierarchy nodes

*/

    MetadataToTreeConverter.prototype.findHierarchicalDimension
=
function(metadata) {

        var tempResult = "";

            if (metadata) {

                   for(var i=0;i< metadata.dimensions.length;i++){

                                          var dim =  metadata.dimensions[i];

                          // check if member of dim are hierarchy_dimension
and then return dim name

                          if (!dim.hasOwnProperty("containsMeasures")) {

                                 if (dim.members[0]) {

                                       if (dim.members[0].type == "HIERARCHY_NODE") {             
                                        tempResult = dim.key;
                         
}
                               
}
                 
}

                 
}
// all dimensions have been traversed

          
}
// check if parse of strMetadata was sucessful
and this._metadata is filled coorectly

            return tempResult;

   }

 

And in the component.js

this.afterUpdate = function() {

        var root =
metadataToTreeConverter.convert(savedMetadata);

        var dimValue =
metadataToTreeConverter.findHierarchicalDimension(savedMetadata);

        this.dimHierarchy( dimValue );

        this.firePropertiesChanged(["dimHierarchy"]);

    treeRenderer.render(root,this.$(), that);

    };

Best regards

Manfred   

0 View this answer in context

Helpful Answer

by
Not what you were looking for? View more on this topic or Ask a question