revisit pathbar draw as well as transition

Author: archmoj

src/traces/sunburst/helpers.js

@@ -13,8 +13,8 @@ var Color = require('../../components/color');
 var setCursor = require('../../lib/setcursor');
 var getTransform = require('../bar/plot').getTransform;
 
-function has(v) {
-    return v || v === 0;
+function hasLabel(label) {
+    return label || label === 0;
 }
 
 exports.findEntryWithLevel = function(hierarchy, level) {
@@ -63,11 +63,11 @@ exports.findChildPt = function(hierarchy, childId) {
 };
 
 exports.isEntry = function(pt) {
-    return !has(pt.parent);
+    return !pt.parent;
 };
 
 exports.isLeaf = function(pt) {
-    return !has(pt.children);
+    return !pt.children;
 };
 
 exports.getPtId = function(pt) {
@@ -172,7 +172,7 @@ exports.isHeader = function(pt, trace) { // it is only used in treemap.
 };
 
 exports.getLabelStr = function(label) {
-    return has(label) ? label.split('<br>').join(' ') : '';
+    return hasLabel(label) ? label.split('<br>').join(' ') : '';
 };
 
 exports.getLabelString = function(label) { // used in hover to reference to the "root"
@@ -182,5 +182,10 @@ exports.getLabelString = function(label) { // used in hover to reference to the
 
 exports.getPath = function(d) {
     var labelStr = exports.getLabelStr(d.data.label) + '/';
-    return has(d.parent) ? exports.getPath(d.parent) + labelStr : labelStr;
+    return d.parent ? exports.getPath(d.parent) + labelStr : labelStr;
+};
+
+exports.listPath = function(d, keyStr) {
+    var list = keyStr ? [d.data[keyStr]] : [d];
+    return d.parent ? exports.listPath(d.parent, keyStr).concat(list) : list;
 };

src/traces/sunburst/plot.js

@@ -231,7 +231,7 @@ function plotOne(gd, cd, element, transitionOpts) {
         }
 
         sliceTop
-            .call(exports.attachFxHandlers, entry, gd, cd, styleOne, constants)
+            .call(exports.attachFxHandlers, gd, cd, styleOne, constants)
             .call(helpers.setSliceCursor, gd, {isTransitioning: gd._transitioning});
 
         slicePath.call(styleOne, pt, trace);
@@ -500,7 +500,7 @@ function makeEventData(pt, trace) {
     return out;
 }
 
-exports.attachFxHandlers = function(sliceTop, entry, gd, cd, styleOne, constants) {
+exports.attachFxHandlers = function(sliceTop, gd, cd, styleOne, constants) {
     var cd0 = cd[0];
     var trace = cd0.trace;
     var hierarchy = cd0.hierarchy;
@@ -595,7 +595,7 @@ exports.attachFxHandlers = function(sliceTop, entry, gd, cd, styleOne, constants
                 }
             }
 
-            var ref1 = entry;
+            var ref1 = hierarchy;
             if(ref1 && getVal(ref1)) {
                 hoverPt.percentVisible = pt.percentVisible = val / getVal(ref1);
                 hoverPt.visibleLabel = pt.visibleLabel = helpers.getLabelString(ref1.data.data.label);
@@ -740,15 +740,17 @@ exports.attachFxHandlers = function(sliceTop, entry, gd, cd, styleOne, constants
         var id = helpers.getPtId(pt);
         var isEntry = helpers.isEntry(pt);
 
-        var passPathOr = function(v) {
-            var q = pt.data.data._pathTo;
-            return (q === undefined) ? v : q;
-        };
-
         if(isTreemap) {
+            var zoomOut = true;
+            var redirectId = pt._redirect;
+            if(redirectId === undefined) {
+                redirectId = id;
+                if(!isEntry) zoomOut = false;
+            }
+
             traceNow._clickedInfo = {
-                id: passPathOr(id),
-                zoomOut: passPathOr(isEntry)
+                id: redirectId,
+                zoomOut: zoomOut
             };
         }
 

src/traces/treemap/draw_ancestors.js

@@ -42,30 +42,43 @@ module.exports = function drawAncestors(gd, cd, entry, slices, opts) {
     var fullLayout = gd._fullLayout;
     var cd0 = cd[0];
     var trace = cd0.trace;
+    var hierarchy = cd0.hierarchy;
 
-    var eachWidth = opts.width / entry.height;
+    var entryDepth = entry.data.depth;
 
-    var sliceData = partition(entry, [width, height], {
+    var eachWidth = opts.width / entryDepth;
+
+    var pathIds = helpers.listPath(entry.data, 'id');
+    pathIds.pop(); // remove last one which is the entry point.
+
+    var sliceData = partition(hierarchy.copy(), [width, height], {
         packing: 'dice',
         pad: {
             inner: 0,
             top: 0,
-            left: eachWidth,
+            left: 0,
             right: 0,
             bottom: 0
         }
     }).descendants();
 
-    // filter out slices that won't show up on graph
-    sliceData = sliceData.filter(function(pt) { return pt.height > 0; });
+    // edit slices that show up on graph
+    sliceData = sliceData.filter(function(pt) {
+        var level = pathIds.indexOf(pt.data.id);
+        if(level === -1) return false;
 
-    slices = slices.data(sliceData, function(pt) {
-        if(isNaN(pt.x0)) pt.x0 = 0;
-        if(isNaN(pt.x1)) pt.x1 = width;
+        pt.x0 = eachWidth * level;
+        pt.x1 = width;
+        pt.y0 = 0;
+        pt.y1 = height;
 
-        return helpers.getPtId(pt);
+        pt._redirect = entry.data.id;
+
+        return true;
     });
 
+    slices = slices.data(sliceData, function(pt) { return helpers.getPtId(pt); });
+
     slices.enter().append('g')
         .classed('pathbar', true);
 
@@ -103,7 +116,7 @@ module.exports = function drawAncestors(gd, cd, entry, slices, opts) {
         }
 
         sliceTop
-            .call(attachFxHandlers, entry, gd, cd, styleOne, constants)
+            .call(attachFxHandlers, gd, cd, styleOne, constants)
             .call(helpers.setSliceCursor, gd, { isTransitioning: gd._transitioning });
 
         slicePath.call(styleOne, pt, trace);

src/traces/treemap/draw_descendants.js

@@ -118,7 +118,7 @@ module.exports = function drawDescendants(gd, cd, entry, slices, opts) {
         }
 
         sliceTop
-            .call(attachFxHandlers, entry, gd, cd, styleOne, constants)
+            .call(attachFxHandlers, gd, cd, styleOne, constants)
             .call(helpers.setSliceCursor, gd, { isTransitioning: gd._transitioning });
 
         slicePath.call(styleOne, pt, trace);

src/traces/treemap/plot.js

@@ -9,7 +9,6 @@
 'use strict';
 
 var d3 = require('d3');
-var d3Hierarchy = require('d3-hierarchy');
 
 var hasTransition = require('../sunburst/helpers').hasTransition;
 var helpers = require('../sunburst/helpers');
@@ -33,9 +32,12 @@ module.exports = function(gd, cdmodule, transitionOpts, makeOnCompleteCallback)
     join = layer.selectAll('g.trace.treemap')
         .data(cdmodule, function(cd) { return cd[0].trace.uid; });
 
+    // using same 'stroke-linejoin' as pie traces
     join.enter().append('g')
         .classed('trace', true)
-        .classed('treemap', true);
+        .classed('treemap', true)
+        .attr('stroke-linejoin', 'round');
+
     join.order();
 
     if(hasTransition(transitionOpts)) {
@@ -88,7 +90,7 @@ function plotOne(gd, cd, element, transitionOpts) {
 
     var getOrigin = function(pt, upDown, refRect, size) {
         var clicked = trace._clickedInfo;
-        if(!clicked || !pt.parent) { // don't animate the entry point
+        if(!clicked) {
             return pt;
         }
 
@@ -97,11 +99,12 @@ function plotOne(gd, cd, element, transitionOpts) {
         var x0, x1, y0, y1;
 
         if(upDown) {
-            x0 = x1 = width; // always slide pathbar to the right
+            x0 = width; // always slide pathbar to the right, unless it is the root node
+            x1 = width;
             y0 = 0;
             y1 = height;
         } else {
-            var ref = clicked.zoomOut ? refRect : (prevLookdown[clicked.id] || prevLookup[clicked.id]);
+            var ref = clicked.zoomOut ? refRect : prevLookdown[clicked.id] || prevLookup[clicked.id];
 
             var e = trace.tiling.pad;
             var isLeftOfRect = function(x) { return x - e <= ref.x0; };
@@ -128,13 +131,12 @@ function plotOne(gd, cd, element, transitionOpts) {
     var vpw = gs.w * (domain.x[1] - domain.x[0]);
     var vph = gs.h * (domain.y[1] - domain.y[0]);
 
-    var barEntry;
-    var mapEntry = helpers.findEntryWithLevel(hierarchy, trace.level);
+    var entry = helpers.findEntryWithLevel(hierarchy, trace.level);
     var maxDepth = helpers.getMaxDepth(trace);
     // N.B. handle multiple-root special case
     var mvX = 0;
     var mvY = 0;
-    if(cd0.hasMultipleRoots && helpers.isHierarchyRoot(mapEntry)) {
+    if(cd0.hasMultipleRoots && helpers.isHierarchyRoot(entry)) {
         maxDepth++;
     }
     trace._maxDepth = maxDepth;
@@ -445,7 +447,7 @@ function plotOne(gd, cd, element, transitionOpts) {
     var selAncestors = gTrace.selectAll('g.pathbar');
     var selDescendants = gTrace.selectAll('g.slice');
 
-    if(!mapEntry) {
+    if(!entry) {
         return selDescendants.remove();
     }
 
@@ -473,7 +475,7 @@ function plotOne(gd, cd, element, transitionOpts) {
         });
     }
 
-    drawDescendants(gd, cd, mapEntry, selDescendants, {
+    drawDescendants(gd, cd, entry, selDescendants, {
         width: vpw,
         height: vph,
 
@@ -497,41 +499,8 @@ function plotOne(gd, cd, element, transitionOpts) {
         hasTransition: hasTransition
     });
 
-    if(trace.pathbar.visible) {
-        var rawAncestors = mapEntry.data.ancestors();
-
-        var ancestors = [];
-        for(var q = 0; q < rawAncestors.length; q++) {
-            var raw = rawAncestors[q].data;
-
-            ancestors[q] = {
-                id: raw.id,
-                pid: raw.pid,
-                label: raw.label,
-                color: raw.color,
-                _pathTo: mapEntry.data.id,
-            };
-
-            if(raw.hasOwnProperty('v')) {
-                ancestors[q].v = raw.v;
-            } else {
-                ancestors[q].value = raw.value;
-            }
-        }
-
-        var root;
-        try {
-            root = d3Hierarchy.stratify()
-                .id(function(d) { return d.id; })
-                .parentId(function(d) { return d.pid; })(ancestors);
-        } catch(e) {
-            return Lib.warn('Failed to build hierarchy for pathbar. Error: ' + e.message);
-        }
-
-        // create new hierarchy
-        barEntry = d3Hierarchy.hierarchy(root);
-
-        drawAncestors(gd, cd, barEntry, selAncestors, {
+    if(trace.pathbar.visible && trace.pathbar.position !== 'inside') {
+        drawAncestors(gd, cd, entry, selAncestors, {
             barDifY: barDifY,
             width: barW,
             height: barH,