@d3plus/core 3.0.5 → 3.0.6

package/es/src/charts/Tree.js

@@ -110,10 +110,12 @@ function _is_native_reflect_construct() {
 import { extent, min, max } from "d3-array";
 import { hierarchy, tree } from "d3-hierarchy";
 import { scaleLinear } from "d3-scale";
+import { colorDefaults } from "@d3plus/color";
 import { assign, elem } from "@d3plus/dom";
 import { merge, nest } from "@d3plus/data";
 import { configPrep, constant } from "../utils/index.js";
-import { Circle, Path } from "../shapes/index.js";
+import * as shapes from "../shapes/index.js";
+import { legendLabel } from "./drawSteps/drawLegend.js";
 import Viz from "./Viz.js";
 var Tree = /*#__PURE__*/ function(Viz) {
     "use strict";
@@ -126,22 +128,31 @@ var Tree = /*#__PURE__*/ function(Viz) {
         _this._separation = function(a, b) {
             return a.parent === b.parent ? 1 : 2;
         };
+        _this._legendTooltip = assign(_this._legendTooltip, {
+            title: legendLabel.bind(_this)
+        });
+        _this._previousShapes = [];
         _this._shape = constant("Circle");
         _this._shapeConfig = assign(_this._shapeConfig, {
             ariaLabel: function(d, i) {
                 return _this._treeData ? "".concat(_this._treeData[i].depth, ". ").concat(_this._drawLabel(d, i), ".") : "";
             },
             labelConfig: {
-                fontColor: "#444"
+                fontColor: colorDefaults.dark
             },
             Path: {
                 fill: "none",
-                stroke: "#ccc",
-                strokeWidth: 1
+                stroke: colorDefaults.missing,
+                strokeWidth: 2
             },
-            r: constant(5),
-            width: constant(10),
-            height: constant(10)
+            r: constant(7),
+            width: constant(12),
+            height: constant(12)
+        });
+        _this._tooltipConfig = assign(_this._tooltipConfig, {
+            title: function(d, i, x) {
+                return _this._drawLabel(d, i, x.depth - 1);
+            }
         });
         _this._tree = tree();
         return _this;
@@ -155,7 +166,9 @@ var Tree = /*#__PURE__*/ function(Viz) {
             value: function _draw(callback) {
                 var _this = this;
                 _get(_get_prototype_of(Tree.prototype), "_draw", this).call(this, callback);
-                var height = this._orient === "vertical" ? this._height - this._margin.top - this._margin.bottom : this._width - this._margin.left - this._margin.right, left = this._orient === "vertical" ? "left" : "top", that = this, transform = "translate(".concat(this._margin.left, ", ").concat(this._margin.top, ")"), width = this._orient === "horizontal" ? this._height - this._margin.top - this._margin.bottom : this._width - this._margin.left - this._margin.right;
+                var isVertical = this._orient === "vertical";
+                var isHorizontal = this._orient === "horizontal";
+                var height = isVertical ? this._height - this._margin.top - this._margin.bottom : this._width - this._margin.left - this._margin.right, left = isVertical ? "left" : "top", that = this, transform = "translate(".concat(this._margin.left, ", ").concat(this._margin.top, ")"), width = isHorizontal ? this._height - this._margin.top - this._margin.bottom : this._width - this._margin.left - this._margin.right;
                 var treeData = this._treeData = this._tree.separation(this._separation).size([
                     width,
                     height
@@ -192,7 +205,7 @@ var Tree = /*#__PURE__*/ function(Viz) {
                     return d.y;
                 });
                 this._labelHeight = min([
-                    this._orient === "vertical" ? 50 : 100,
+                    isVertical ? 50 : 100,
                     (yExtent[1] - rBufferRoot - rBufferEnd) / (this._groupBy.length + 1)
                 ]);
                 this._labelWidths = nest(treeData, function(d) {
@@ -213,7 +226,7 @@ var Tree = /*#__PURE__*/ function(Viz) {
                 ]);
                 treeData.forEach(function(d) {
                     var val = yScale(d.y);
-                    if (_this._orient === "horizontal") {
+                    if (isHorizontal) {
                         d.y = d.x;
                         d.x = val;
                     } else d.y = val;
@@ -227,22 +240,24 @@ var Tree = /*#__PURE__*/ function(Viz) {
                         transform: transform
                     }
                 };
-                this._shapes.push(new Path().data(treeData.filter(function(d) {
+                this._shapes.push(new shapes.Path().data(treeData.filter(function(d) {
                     return d.depth > 1;
+                }).map(function(d) {
+                    return assign({}, d);
                 })).select(elem("g.d3plus-Tree-Links", elemObject).node()).config(configPrep.bind(this)(this._shapeConfig, "shape", "Path")).config({
                     d: function(d) {
                         var r = _this._shapeConfig.r;
                         if (typeof r === "function") r = r(d.data, d.i);
-                        var px = d.parent.x - d.x + (_this._orient === "vertical" ? 0 : r), py = d.parent.y - d.y + (_this._orient === "vertical" ? r : 0), x = _this._orient === "vertical" ? 0 : -r, y = _this._orient === "vertical" ? -r : 0;
-                        return _this._orient === "vertical" ? "M".concat(x, ",").concat(y, "C").concat(x, ",").concat((y + py) / 2, " ").concat(px, ",").concat((y + py) / 2, " ").concat(px, ",").concat(py) : "M".concat(x, ",").concat(y, "C").concat((x + px) / 2, ",").concat(y, " ").concat((x + px) / 2, ",").concat(py, " ").concat(px, ",").concat(py);
+                        var px = d.parent.x - d.x + (isVertical ? 0 : r), py = d.parent.y - d.y + (isVertical ? r : 0), x = isVertical ? 0 : -r, y = isVertical ? -r : 0;
+                        return isVertical ? "M".concat(x, ",").concat(y, "C").concat(x, ",").concat((y + py) / 2, " ").concat(px, ",").concat((y + py) / 2, " ").concat(px, ",").concat(py) : "M".concat(x, ",").concat(y, "C").concat((x + px) / 2, ",").concat(y, " ").concat((x + px) / 2, ",").concat(py, " ").concat(px, ",").concat(py);
                     },
                     id: function(d, i) {
-                        return _this._ids(d, i).join("-");
+                        return _this._ids(d, i)[d.depth - 1];
                     }
                 }).render());
-                this._shapes.push(new Circle().data(treeData).select(elem("g.d3plus-Tree-Shapes", elemObject).node()).config(configPrep.bind(this)(this._shapeConfig, "shape", "Circle")).config({
+                var shapeConfig = {
                     id: function(d, i) {
-                        return _this._ids(d, i).join("-");
+                        return _this._ids(d, i)[d.depth - 1];
                     },
                     label: function(d, i) {
                         if (_this._label) return _this._label(d.data, i);
@@ -250,36 +265,55 @@ var Tree = /*#__PURE__*/ function(Viz) {
                         return ids[ids.length - 1];
                     },
                     labelConfig: {
-                        textAnchor: function(d) {
-                            return _this._orient === "vertical" ? "middle" : d.data.children && d.data.depth !== _this._groupBy.length ? "end" : "start";
+                        textAnchor: function(d, i, x) {
+                            return isVertical ? "middle" : x.children && x.depth !== _this._drawDepth + 1 ? "end" : "start";
                         },
-                        verticalAlign: function(d) {
-                            return _this._orient === "vertical" ? d.data.depth === 1 ? "bottom" : "top" : "middle";
+                        verticalAlign: function(d, i, x) {
+                            return isVertical ? x.depth === 1 ? "bottom" : "top" : "middle";
                         }
                     },
                     hitArea: function(d, i, s) {
-                        var h = _this._labelHeight, w = _this._labelWidths[d.depth - 1];
+                        var h = _this._labelHeight, offset = s.r ? s.r : isVertical ? s.height / 2 : s.width / 2, w = _this._labelWidths[d.depth - 1];
                         return {
-                            width: _this._orient === "vertical" ? w : s.r * 2 + w,
-                            height: _this._orient === "horizontal" ? h : s.r * 2 + h,
-                            x: _this._orient === "vertical" ? -w / 2 : d.children && d.depth !== _this._groupBy.length ? -(s.r + w) : -s.r,
-                            y: _this._orient === "horizontal" ? -h / 2 : d.children && d.depth !== _this._groupBy.length ? -(s.r + _this._labelHeight) : -s.r
+                            width: isVertical ? w : offset * 2 + w,
+                            height: isHorizontal ? h : offset * 2 + h,
+                            x: isVertical ? -w / 2 : d.children && d.depth !== _this._groupBy.length ? -(offset + w) : -offset,
+                            y: isHorizontal ? -h / 2 : d.children && d.depth !== _this._groupBy.length ? -(offset + _this._labelHeight) : -offset
                         };
                     },
                     labelBounds: function(d, i, s) {
-                        var h = _this._labelHeight, height = _this._orient === "vertical" ? "height" : "width", w = _this._labelWidths[d.depth - 1], width = _this._orient === "vertical" ? "width" : "height", x = _this._orient === "vertical" ? "x" : "y", y = _this._orient === "vertical" ? "y" : "x";
+                        var h = _this._labelHeight, height = isVertical ? "height" : "width", offset = s.r ? s.r : isVertical ? s.height / 2 : s.width / 2, w = _this._labelWidths[d.depth - 1], width = isVertical ? "width" : "height", x = isVertical ? "x" : "y", y = isVertical ? "y" : "x";
                         var _obj;
-                        return _obj = {}, _define_property(_obj, width, w), _define_property(_obj, height, h), _define_property(_obj, x, -w / 2), _define_property(_obj, y, d.children && d.depth !== _this._groupBy.length ? -(s.r + h) : s.r), _obj;
+                        return _obj = {}, _define_property(_obj, width, w), _define_property(_obj, height, h), _define_property(_obj, x, -w / 2), _define_property(_obj, y, d.children && d.depth !== _this._groupBy.length ? -(offset + h) : offset), _obj;
                     }
-                }).render());
+                };
+                var shapeData = nest(treeData, function(d) {
+                    return _this._shape(d.data);
+                });
+                var dataShapes = shapeData.map(function(d) {
+                    return d.key;
+                });
+                var exitShapes = this._previousShapes.filter(function(d) {
+                    return !dataShapes.includes(d);
+                });
+                shapeData.concat(exitShapes.map(function(key) {
+                    return {
+                        key: key,
+                        values: []
+                    };
+                })).forEach(function(param) {
+                    var key = param.key, values = param.values;
+                    _this._shapes.push(new shapes[key]().data(values).select(elem("g.d3plus-Tree-".concat(key), elemObject).node()).config(configPrep.bind(_this)(_this._shapeConfig, "shape", key)).config(shapeConfig).render());
+                });
+                this._previousShapes = dataShapes;
                 return this;
             }
         },
         {
             /**
       @memberof Tree
-      @desc If *value* is specified, sets the orientation to the specified value. If *value* is not specified, returns the current orientation.
-      @param {String} [*value* = "vertical"] Accepts either "vertical" or "horizontal".
+      @desc Changes the orientation of the entire Tree, either "vertical" (top to bottom) or "horizontal" (left to right).
+      @param {'vertical'|'horizontal'} [*value* = "vertical"] Accepts either "vertical" or "horizontal".
   */ key: "orient",
             value: function orient(_) {
                 return arguments.length ? (this._orient = _, this) : this._orient;

package/es/src/charts/Viz.js

@@ -1261,13 +1261,9 @@ If *data* is not specified, this method returns the current primary data array,
         {
             /**
       @memberof Viz
-      @desc If *value* is specified, sets the group accessor(s) to the specified string, function, or array of values and returns the current class instance.
+      @desc Defines the mapping between data and shape. The value can be a String matching a key in each data point (default is "id"), or an accessor Function that returns a unique value for each data point. Additionally, an Array of these values may be provided if the visualization supports nested hierarchies.
       @param {String|Function|Array} [*value*]
       @chainable
-      @example
-function value(d) {
-  return d.id;
-}
   */ key: "groupBy",
             value: function groupBy(_) {
                 var _this = this;
@@ -1551,8 +1547,8 @@ function value(d) {
         {
             /**
       @memberof Viz
-      @desc If *value* is specified, sets the shape accessor to the specified function or number and returns the current class instance.
-      @param {Function|String} [*value*]
+      @desc Changes the primary shape used to represent each data point in a visualization. Not all visualizations support changing shapes, this method can be provided the String name of a D3plus shape class (for example, "Rect" or "Circle"), or an accessor Function that returns the String class name to be used for each individual data point.
+      @param {String|Function} [*value*]
       @chainable
   */ key: "shape",
             value: function shape(_) {

package/es/src/charts/drawSteps/drawLegend.js

@@ -103,7 +103,9 @@ var legendAttrs = [
         duration: this._duration,
         update: transform
     }).node();
-    this._legendClass.id(fill).align(wide ? "center" : position).direction(wide ? "row" : "column").duration(this._duration).data(visible ? legendData : []).height(wide ? this._height - (this._margin.bottom + this._margin.top) : this._height - (this._margin.bottom + this._margin.top + padding.bottom + padding.top)).locale(this._locale).parent(this).select(legendGroup).verticalAlign(!wide ? "middle" : position).width(wide ? this._width - (this._margin.left + this._margin.right + padding.left + padding.right) : this._width - (this._margin.left + this._margin.right)).shapeConfig(configPrep.bind(this)(this._shapeConfig, "legend")).shapeConfig({
+    this._legendClass.id(fill).align(wide ? "center" : position).direction(wide ? "row" : "column").duration(this._duration).data(visible ? legendData : []).height(wide ? this._height - (this._margin.bottom + this._margin.top) : this._height - (this._margin.bottom + this._margin.top + padding.bottom + padding.top)).locale(this._locale).parent(this).select(legendGroup).shape(function(d, i) {
+        return _this1._shape(d, i) === "Circle" ? "Circle" : "Rect";
+    }).verticalAlign(!wide ? "middle" : position).width(wide ? this._width - (this._margin.left + this._margin.right + padding.left + padding.right) : this._width - (this._margin.left + this._margin.right)).shapeConfig(configPrep.bind(this)(this._shapeConfig, "legend")).shapeConfig({
         fill: function(d, i) {
             return hidden(d, i) ? _this1._hiddenColor(d, i) : getAttr(d, i, "fill");
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@d3plus/core",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "description": "Data visualization made easy. A javascript library that extends the popular D3.js to enable fast and beautiful visualizations.",
   "license": "MIT",
   "type": "module",
@@ -34,13 +34,13 @@
     "test": "eslint index.js src/**/*.js && eslint --global=it test && mocha 'test/**/*-test.js'"
   },
   "dependencies": {
-    "@d3plus/color": "3.0.5",
-    "@d3plus/data": "3.0.5",
-    "@d3plus/dom": "3.0.5",
-    "@d3plus/format": "3.0.5",
-    "@d3plus/locales": "3.0.5",
-    "@d3plus/math": "3.0.5",
-    "@d3plus/text": "3.0.5",
+    "@d3plus/color": "3.0.6",
+    "@d3plus/data": "3.0.6",
+    "@d3plus/dom": "3.0.6",
+    "@d3plus/format": "3.0.6",
+    "@d3plus/locales": "3.0.6",
+    "@d3plus/math": "3.0.6",
+    "@d3plus/text": "3.0.6",
     "@popperjs/core": "^2.11.8",
     "d3-array": "^3.2.4",
     "d3-brush": "^3.0.0",

package/umd/d3plus-core.full.js

@@ -1,5 +1,5 @@
 /*
-  @d3plus/core v3.0.5
+  @d3plus/core v3.0.6
   Data visualization made easy. A javascript library that extends the popular D3.js to enable fast and beautiful visualizations.
   Copyright (c) 2025 D3plus - https://d3plus.org
   @license MIT
@@ -33543,7 +33543,7 @@
           duration: this._duration,
           update: transform
       }).node();
-      this._legendClass.id(fill).align(wide ? "center" : position).direction(wide ? "row" : "column").duration(this._duration).data(visible ? legendData : []).height(wide ? this._height - (this._margin.bottom + this._margin.top) : this._height - (this._margin.bottom + this._margin.top + padding.bottom + padding.top)).locale(this._locale).parent(this).select(legendGroup).verticalAlign(!wide ? "middle" : position).width(wide ? this._width - (this._margin.left + this._margin.right + padding.left + padding.right) : this._width - (this._margin.left + this._margin.right)).shapeConfig(configPrep.bind(this)(this._shapeConfig, "legend")).shapeConfig({
+      this._legendClass.id(fill).align(wide ? "center" : position).direction(wide ? "row" : "column").duration(this._duration).data(visible ? legendData : []).height(wide ? this._height - (this._margin.bottom + this._margin.top) : this._height - (this._margin.bottom + this._margin.top + padding.bottom + padding.top)).locale(this._locale).parent(this).select(legendGroup).shape((d, i)=>this._shape(d, i) === "Circle" ? "Circle" : "Rect").verticalAlign(!wide ? "middle" : position).width(wide ? this._width - (this._margin.left + this._margin.right + padding.left + padding.right) : this._width - (this._margin.left + this._margin.right)).shapeConfig(configPrep.bind(this)(this._shapeConfig, "legend")).shapeConfig({
           fill: (d, i)=>hidden(d, i) ? this._hiddenColor(d, i) : getAttr(d, i, "fill"),
           labelConfig: {
               fontOpacity: (d, i)=>hidden(d, i) ? this._hiddenOpacity(d, i) : 1
@@ -34802,13 +34802,9 @@
       }
       /**
         @memberof Viz
-        @desc If *value* is specified, sets the group accessor(s) to the specified string, function, or array of values and returns the current class instance.
+        @desc Defines the mapping between data and shape. The value can be a String matching a key in each data point (default is "id"), or an accessor Function that returns a unique value for each data point. Additionally, an Array of these values may be provided if the visualization supports nested hierarchies.
         @param {String|Function|Array} [*value*]
         @chainable
-        @example
-  function value(d) {
-    return d.id;
-  }
     */ groupBy(_) {
           if (!arguments.length) return this._groupBy;
           this._groupByRaw = _;
@@ -35016,8 +35012,8 @@
       }
       /**
         @memberof Viz
-        @desc If *value* is specified, sets the shape accessor to the specified function or number and returns the current class instance.
-        @param {Function|String} [*value*]
+        @desc Changes the primary shape used to represent each data point in a visualization. Not all visualizations support changing shapes, this method can be provided the String name of a D3plus shape class (for example, "Rect" or "Circle"), or an accessor Function that returns the String class name to be used for each individual data point.
+        @param {String|Function} [*value*]
         @chainable
     */ shape(_) {
           return arguments.length ? (this._shape = typeof _ === "function" ? _ : constant$9(_), this) : this._shape;
@@ -56741,7 +56737,9 @@
         @private
     */ _draw(callback) {
           super._draw(callback);
-          const height = this._orient === "vertical" ? this._height - this._margin.top - this._margin.bottom : this._width - this._margin.left - this._margin.right, left = this._orient === "vertical" ? "left" : "top", that = this, transform = `translate(${this._margin.left}, ${this._margin.top})`, width = this._orient === "horizontal" ? this._height - this._margin.top - this._margin.bottom : this._width - this._margin.left - this._margin.right;
+          const isVertical = this._orient === "vertical";
+          const isHorizontal = this._orient === "horizontal";
+          const height = isVertical ? this._height - this._margin.top - this._margin.bottom : this._width - this._margin.left - this._margin.right, left = isVertical ? "left" : "top", that = this, transform = `translate(${this._margin.left}, ${this._margin.top})`, width = isHorizontal ? this._height - this._margin.top - this._margin.bottom : this._width - this._margin.left - this._margin.right;
           const treeData = this._treeData = this._tree.separation(this._separation).size([
               width,
               height
@@ -56766,7 +56764,7 @@
           const rBufferEnd = max$5(treeData, (d)=>d.children ? 0 : r(d.data, d.i));
           const yExtent = extent$1(treeData, (d)=>d.y);
           this._labelHeight = min$5([
-              this._orient === "vertical" ? 50 : 100,
+              isVertical ? 50 : 100,
               (yExtent[1] - rBufferRoot - rBufferEnd) / (this._groupBy.length + 1)
           ]);
           this._labelWidths = nest(treeData, (d)=>d.depth).map((d)=>d.values.reduce((num, v, i)=>{
@@ -56783,7 +56781,7 @@
           ]);
           treeData.forEach((d)=>{
               const val = yScale(d.y);
-              if (this._orient === "horizontal") {
+              if (isHorizontal) {
                   d.y = d.x;
                   d.x = val;
               } else d.y = val;
@@ -56797,51 +56795,61 @@
                   transform
               }
           };
-          this._shapes.push(new Path$2().data(treeData.filter((d)=>d.depth > 1)).select(elem("g.d3plus-Tree-Links", elemObject).node()).config(configPrep.bind(this)(this._shapeConfig, "shape", "Path")).config({
+          this._shapes.push(new Path$2().data(treeData.filter((d)=>d.depth > 1).map((d)=>assign({}, d))).select(elem("g.d3plus-Tree-Links", elemObject).node()).config(configPrep.bind(this)(this._shapeConfig, "shape", "Path")).config({
               d: (d)=>{
                   let r = this._shapeConfig.r;
                   if (typeof r === "function") r = r(d.data, d.i);
-                  const px = d.parent.x - d.x + (this._orient === "vertical" ? 0 : r), py = d.parent.y - d.y + (this._orient === "vertical" ? r : 0), x = this._orient === "vertical" ? 0 : -r, y = this._orient === "vertical" ? -r : 0;
-                  return this._orient === "vertical" ? `M${x},${y}C${x},${(y + py) / 2} ${px},${(y + py) / 2} ${px},${py}` : `M${x},${y}C${(x + px) / 2},${y} ${(x + px) / 2},${py} ${px},${py}`;
+                  const px = d.parent.x - d.x + (isVertical ? 0 : r), py = d.parent.y - d.y + (isVertical ? r : 0), x = isVertical ? 0 : -r, y = isVertical ? -r : 0;
+                  return isVertical ? `M${x},${y}C${x},${(y + py) / 2} ${px},${(y + py) / 2} ${px},${py}` : `M${x},${y}C${(x + px) / 2},${y} ${(x + px) / 2},${py} ${px},${py}`;
               },
-              id: (d, i)=>this._ids(d, i).join("-")
+              id: (d, i)=>this._ids(d, i)[d.depth - 1]
           }).render());
-          this._shapes.push(new Circle().data(treeData).select(elem("g.d3plus-Tree-Shapes", elemObject).node()).config(configPrep.bind(this)(this._shapeConfig, "shape", "Circle")).config({
-              id: (d, i)=>this._ids(d, i).join("-"),
+          const shapeConfig = {
+              id: (d, i)=>this._ids(d, i)[d.depth - 1],
               label: (d, i)=>{
                   if (this._label) return this._label(d.data, i);
                   const ids = this._ids(d, i).slice(0, d.depth);
                   return ids[ids.length - 1];
               },
               labelConfig: {
-                  textAnchor: (d)=>this._orient === "vertical" ? "middle" : d.data.children && d.data.depth !== this._groupBy.length ? "end" : "start",
-                  verticalAlign: (d)=>this._orient === "vertical" ? d.data.depth === 1 ? "bottom" : "top" : "middle"
+                  textAnchor: (d, i, x)=>isVertical ? "middle" : x.children && x.depth !== this._drawDepth + 1 ? "end" : "start",
+                  verticalAlign: (d, i, x)=>isVertical ? x.depth === 1 ? "bottom" : "top" : "middle"
               },
               hitArea: (d, i, s)=>{
-                  const h = this._labelHeight, w = this._labelWidths[d.depth - 1];
+                  const h = this._labelHeight, offset = s.r ? s.r : isVertical ? s.height / 2 : s.width / 2, w = this._labelWidths[d.depth - 1];
                   return {
-                      width: this._orient === "vertical" ? w : s.r * 2 + w,
-                      height: this._orient === "horizontal" ? h : s.r * 2 + h,
-                      x: this._orient === "vertical" ? -w / 2 : d.children && d.depth !== this._groupBy.length ? -(s.r + w) : -s.r,
-                      y: this._orient === "horizontal" ? -h / 2 : d.children && d.depth !== this._groupBy.length ? -(s.r + this._labelHeight) : -s.r
+                      width: isVertical ? w : offset * 2 + w,
+                      height: isHorizontal ? h : offset * 2 + h,
+                      x: isVertical ? -w / 2 : d.children && d.depth !== this._groupBy.length ? -(offset + w) : -offset,
+                      y: isHorizontal ? -h / 2 : d.children && d.depth !== this._groupBy.length ? -(offset + this._labelHeight) : -offset
                   };
               },
               labelBounds: (d, i, s)=>{
-                  const h = this._labelHeight, height = this._orient === "vertical" ? "height" : "width", w = this._labelWidths[d.depth - 1], width = this._orient === "vertical" ? "width" : "height", x = this._orient === "vertical" ? "x" : "y", y = this._orient === "vertical" ? "y" : "x";
+                  const h = this._labelHeight, height = isVertical ? "height" : "width", offset = s.r ? s.r : isVertical ? s.height / 2 : s.width / 2, w = this._labelWidths[d.depth - 1], width = isVertical ? "width" : "height", x = isVertical ? "x" : "y", y = isVertical ? "y" : "x";
                   return {
                       [width]: w,
                       [height]: h,
                       [x]: -w / 2,
-                      [y]: d.children && d.depth !== this._groupBy.length ? -(s.r + h) : s.r
+                      [y]: d.children && d.depth !== this._groupBy.length ? -(offset + h) : offset
                   };
               }
-          }).render());
+          };
+          const shapeData = nest(treeData, (d)=>this._shape(d.data));
+          const dataShapes = shapeData.map((d)=>d.key);
+          const exitShapes = this._previousShapes.filter((d)=>!dataShapes.includes(d));
+          shapeData.concat(exitShapes.map((key)=>({
+                  key,
+                  values: []
+              }))).forEach(({ key, values })=>{
+              this._shapes.push(new shapes[key]().data(values).select(elem(`g.d3plus-Tree-${key}`, elemObject).node()).config(configPrep.bind(this)(this._shapeConfig, "shape", key)).config(shapeConfig).render());
+          });
+          this._previousShapes = dataShapes;
           return this;
       }
       /**
         @memberof Tree
-        @desc If *value* is specified, sets the orientation to the specified value. If *value* is not specified, returns the current orientation.
-        @param {String} [*value* = "vertical"] Accepts either "vertical" or "horizontal".
+        @desc Changes the orientation of the entire Tree, either "vertical" (top to bottom) or "horizontal" (left to right).
+        @param {'vertical'|'horizontal'} [*value* = "vertical"] Accepts either "vertical" or "horizontal".
     */ orient(_) {
           return arguments.length ? (this._orient = _, this) : this._orient;
       }
@@ -56867,20 +56875,27 @@
           super();
           this._orient = "vertical";
           this._separation = (a, b)=>a.parent === b.parent ? 1 : 2;
+          this._legendTooltip = assign(this._legendTooltip, {
+              title: legendLabel.bind(this)
+          });
+          this._previousShapes = [];
           this._shape = constant$9("Circle");
           this._shapeConfig = assign(this._shapeConfig, {
               ariaLabel: (d, i)=>this._treeData ? `${this._treeData[i].depth}. ${this._drawLabel(d, i)}.` : "",
               labelConfig: {
-                  fontColor: "#444"
+                  fontColor: defaults.dark
               },
               Path: {
                   fill: "none",
-                  stroke: "#ccc",
-                  strokeWidth: 1
+                  stroke: defaults.missing,
+                  strokeWidth: 2
               },
-              r: constant$9(5),
-              width: constant$9(10),
-              height: constant$9(10)
+              r: constant$9(7),
+              width: constant$9(12),
+              height: constant$9(12)
+          });
+          this._tooltipConfig = assign(this._tooltipConfig, {
+              title: (d, i, x)=>this._drawLabel(d, i, x.depth - 1)
           });
           this._tree = tree();
       }