Skip to Content

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

DS SDK : Expand hierarchy in visualization


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

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:

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;

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

        // Declare the nodes

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



        .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";}




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.



Former Member

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 */
void expandHierarchyNode() {*



/* Collapse the hierarchy */
void collapseHierarchyNode() {*


In the metadata-tree-converter.js


     * Finds the dimension with hierarchy nodes


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 =

        var dimValue =

        this.dimHierarchy( dimValue );


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


Best regards


0 View this answer in context

Helpful Answer

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