@d3plus/core 3.0.5 → 3.0.6

package/umd/d3plus-core.full.min.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
@@ -3971,7 +3971,7 @@ function uf(t,n){t!==n&&(t&&(t.p=n),n)&&(n.n=t)}af||(af=1,ch.exports=((dh=rf.pro
       @desc Renders the legend if this._legend is not falsy.
       @param {Array} data The filtered data array to be displayed.
       @private
-  */function pf(t=[]){let e=[],i=(t,n,e)=>{var i=this._shape(t,n),i=("fill"===e&&"Line"===i&&(e="stroke"),(this._shapeConfig[i]&&this._shapeConfig[i][e]?this._shapeConfig[i]:this._shapeConfig)[e]);return"function"==typeof i?i.bind(this)(t,n):i};var n=(n,e)=>df.map(t=>i(n,e,t)).join("_"),a=(qi(this._colorScale?t.filter((t,n)=>void 0===this._colorScale(t,n)):t,t=>e.push(_u(t,this._aggs)),n),e.sort(this._legendSort),e.map((t,n)=>this._ids(t,n).slice(0,this._drawDepth+1)));for(let n=this._legendDepth=0;n<=this._drawDepth;n++){var r=a.map(t=>t[n]);if(!r.some(t=>t instanceof Array)&&Array.from(new Set(r)).length===e.length){this._legendDepth=n;break}}let o=(t,n)=>{let e=this._id(t,n);return e instanceof Array&&(e=e[0]),this._hidden.includes(e)||this._solo.length&&!this._solo.includes(e)};var t=this._legendClass.outerBounds(),s=this.config();let l=this._legendPosition.bind(this)(s);[!1,"top","bottom","left","right"].includes(l)||(l="bottom");var h=["top","bottom"].includes(l),u=this._legendPadding()?this._padding:{top:0,right:0,bottom:0,left:0},c={transform:`translate(${h?this._margin.left+u.left:this._margin.left}, ${h?this._margin.top:this._margin.top+u.top})`},s=this._legend.bind(this)(s,e),c=Nt("g.d3plus-viz-legend",{condition:s&&!this._legendConfig.select,enter:c,parent:this._select,duration:this._duration,update:c}).node();this._legendClass.id(n).align(h?"center":l).direction(h?"row":"column").duration(this._duration).data(s?e:[]).height(h?this._height-(this._margin.bottom+this._margin.top):this._height-(this._margin.bottom+this._margin.top+u.bottom+u.top)).locale(this._locale).parent(this).select(c).verticalAlign(h?l:"middle").width(h?this._width-(this._margin.left+this._margin.right+u.left+u.right):this._width-(this._margin.left+this._margin.right)).shapeConfig(Lt.bind(this)(this._shapeConfig,"legend")).shapeConfig({fill:(t,n)=>o(t,n)?this._hiddenColor(t,n):i(t,n,"fill"),labelConfig:{fontOpacity:(t,n)=>o(t,n)?this._hiddenOpacity(t,n):1}}).config(this._legendConfig).render(),!this._legendConfig.select&&t.height&&(this._margin[l]+=h?t.height+2*this._legendClass.padding():t.width+2*this._legendClass.padding())}
+  */function pf(t=[]){let e=[],i=(t,n,e)=>{var i=this._shape(t,n),i=("fill"===e&&"Line"===i&&(e="stroke"),(this._shapeConfig[i]&&this._shapeConfig[i][e]?this._shapeConfig[i]:this._shapeConfig)[e]);return"function"==typeof i?i.bind(this)(t,n):i};var n=(n,e)=>df.map(t=>i(n,e,t)).join("_"),a=(qi(this._colorScale?t.filter((t,n)=>void 0===this._colorScale(t,n)):t,t=>e.push(_u(t,this._aggs)),n),e.sort(this._legendSort),e.map((t,n)=>this._ids(t,n).slice(0,this._drawDepth+1)));for(let n=this._legendDepth=0;n<=this._drawDepth;n++){var r=a.map(t=>t[n]);if(!r.some(t=>t instanceof Array)&&Array.from(new Set(r)).length===e.length){this._legendDepth=n;break}}let o=(t,n)=>{let e=this._id(t,n);return e instanceof Array&&(e=e[0]),this._hidden.includes(e)||this._solo.length&&!this._solo.includes(e)};var t=this._legendClass.outerBounds(),s=this.config();let l=this._legendPosition.bind(this)(s);[!1,"top","bottom","left","right"].includes(l)||(l="bottom");var h=["top","bottom"].includes(l),u=this._legendPadding()?this._padding:{top:0,right:0,bottom:0,left:0},c={transform:`translate(${h?this._margin.left+u.left:this._margin.left}, ${h?this._margin.top:this._margin.top+u.top})`},s=this._legend.bind(this)(s,e),c=Nt("g.d3plus-viz-legend",{condition:s&&!this._legendConfig.select,enter:c,parent:this._select,duration:this._duration,update:c}).node();this._legendClass.id(n).align(h?"center":l).direction(h?"row":"column").duration(this._duration).data(s?e:[]).height(h?this._height-(this._margin.bottom+this._margin.top):this._height-(this._margin.bottom+this._margin.top+u.bottom+u.top)).locale(this._locale).parent(this).select(c).shape((t,n)=>"Circle"===this._shape(t,n)?"Circle":"Rect").verticalAlign(h?l:"middle").width(h?this._width-(this._margin.left+this._margin.right+u.left+u.right):this._width-(this._margin.left+this._margin.right)).shapeConfig(Lt.bind(this)(this._shapeConfig,"legend")).shapeConfig({fill:(t,n)=>o(t,n)?this._hiddenColor(t,n):i(t,n,"fill"),labelConfig:{fontOpacity:(t,n)=>o(t,n)?this._hiddenOpacity(t,n):1}}).config(this._legendConfig).render(),!this._legendConfig.select&&t.height&&(this._margin[l]+=h?t.height+2*this._legendClass.padding():t.width+2*this._legendClass.padding())}
 /**
       @function _drawSubtitle
       @desc Draws a subtitle if this._subtitle is defined.
@@ -4325,13 +4325,9 @@ return H("body").on("touchstart."+this._uuid,
     */fontFamily(t){if(arguments.length){let n={fontFamily:t},e={titleConfig:n,shapeConfig:{labelConfig:n}};return this.shapeConfig({labelConfig:n}),this.colorScaleConfig({axisConfig:e}),["axis","column","row","timeline","x","y","x2","y2"].forEach(t=>{t+="Config";this[t]&&this[t](e)}),["back","title","total","subtitle"].forEach(t=>{t+="Config";this[t]&&this[t](n)}),this.tooltipConfig({tooltipStyle:{"font-family":ze(t)}}),this._fontFamily=t,this}return this._fontFamily}
 /**
         @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(t){return arguments.length?((this._groupByRaw=t)instanceof Array||(t=[t]),this._groupBy=t.map(t=>"function"==typeof t?t:(this._aggs[t]||(this._aggs[t]=(t,n)=>{t=pu(t.map(n));return 1===t.length?t[0]:t}),p(t))),this):this._groupBy}
 /**
         @memberof Viz
@@ -4461,8 +4457,8 @@ return H("body").on("touchstart."+this._uuid,
     */select(t){return arguments.length?(this._select=H(t),this):this._select}
 /**
         @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(t){return arguments.length?(this._shape="function"==typeof t?t:Bt(t),this):this._shape}
 /**
@@ -7255,15 +7251,15 @@ r=r<0?r%U9+U9:r)?this._+="A"+e+","+e+",0,1,"+u+","+(t-o)+","+(n-s)+"A"+e+","+e+"
 /**
         Extends the draw behavior of the abstract Viz class.
         @private
-    */_draw(t){super._draw(t);let n="vertical"===this._orient?this._height-this._margin.top-this._margin.bottom:this._width-this._margin.left-this._margin.right,r="vertical"===this._orient?"left":"top",e=this,i=`translate(${this._margin.left}, ${this._margin.top})`,o="horizontal"===this._orient?this._height-this._margin.top-this._margin.bottom:this._width-this._margin.left-this._margin.right;t=this._treeData=this._tree.separation(this._separation).size([o,n])(B6({key:"root",values:mu(this._filteredData,this._groupBy.slice(0,this._drawDepth+1))},t=>t.key&&t.values?t.values:null).sort(this._sort)).descendants().filter(t=>t.depth<=this._groupBy.length&&t.parent);
+    */_draw(t){super._draw(t);let o="vertical"===this._orient,r="horizontal"===this._orient,n=o?this._height-this._margin.top-this._margin.bottom:this._width-this._margin.left-this._margin.right,s=o?"left":"top",e=this,i=`translate(${this._margin.left}, ${this._margin.top})`,l=r?this._height-this._margin.top-this._margin.bottom:this._width-this._margin.left-this._margin.right;t=this._treeData=this._tree.separation(this._separation).size([l,n])(B6({key:"root",values:mu(this._filteredData,this._groupBy.slice(0,this._drawDepth+1))},t=>t.key&&t.values?t.values:null).sort(this._sort)).descendants().filter(t=>t.depth<=this._groupBy.length&&t.parent);
 /**
           Merges the values of a given nest branch.
           @private
-      */t.forEach((t,n)=>{t.data.key&&t.data.values&&(t.data=function n(t){return _u(t.values.map(t=>t.key&&t.values?n(t):t),e._aggs)}(t.data)),t.__d3plus__=!0,t.i=n});let a=this._shapeConfig.r;"function"!=typeof a&&(a=Bt(a));var s=Ot(t,t=>1===t.depth?a(t.data,t.i):0),l=Ot(t,t=>t.children?0:a(t.data,t.i)),h=Hi(t,t=>t.y);this._labelHeight=Dt(["vertical"===this._orient?50:100,(h[1]-s-l)/(this._groupBy.length+1)]),this._labelWidths=mu(t,t=>t.depth).map(a=>a.values.reduce((t,n,e)=>{var i=e<a.values.length-1?a.values[e+1].x:o+this._margin[r],e=e?a.values[e-1].x:this._margin[r];return Dt([t,i-n.x,n.x-e])},o));let u=$a().domain(h).range([s+this._labelHeight,n-l-this._labelHeight]);t.forEach(t=>{var n=u(t.y);"horizontal"===this._orient?(t.y=t.x,t.x=n):t.y=n});h={parent:this._select,enter:{transform:i},update:{transform:i}};return this._shapes.push((new zc).data(t.filter(t=>1<t.depth)).select(Nt("g.d3plus-Tree-Links",h).node()).config(Lt.bind(this)(this._shapeConfig,"shape","Path")).config({d:t=>{let n=this._shapeConfig.r;"function"==typeof n&&(n=n(t.data,t.i));var e=t.parent.x-t.x+("vertical"===this._orient?0:n),t=t.parent.y-t.y+("vertical"===this._orient?n:0),i="vertical"===this._orient?0:-n,a="vertical"===this._orient?-n:0;return"vertical"===this._orient?`M${i},${a}C${i},${(a+t)/2} ${e},${(a+t)/2} ${e},`+t:`M${i},${a}C${(i+e)/2},${a} ${(i+e)/2},${t} ${e},`+t},id:(t,n)=>this._ids(t,n).join("-")}).render()),this._shapes.push((new xc).data(t).select(Nt("g.d3plus-Tree-Shapes",h).node()).config(Lt.bind(this)(this._shapeConfig,"shape","Circle")).config({id:(t,n)=>this._ids(t,n).join("-"),label:(t,n)=>this._label?this._label(t.data,n):(n=this._ids(t,n).slice(0,t.depth))[n.length-1],labelConfig:{textAnchor:t=>"vertical"===this._orient?"middle":t.data.children&&t.data.depth!==this._groupBy.length?"end":"start",verticalAlign:t=>"vertical"===this._orient?1===t.data.depth?"bottom":"top":"middle"},hitArea:(t,n,e)=>{var i=this._labelHeight,a=this._labelWidths[t.depth-1];return{width:"vertical"===this._orient?a:2*e.r+a,height:"horizontal"===this._orient?i:2*e.r+i,x:"vertical"===this._orient?-a/2:t.children&&t.depth!==this._groupBy.length?-(e.r+a):-e.r,y:"horizontal"===this._orient?-i/2:t.children&&t.depth!==this._groupBy.length?-(e.r+this._labelHeight):-e.r}},labelBounds:(t,n,e)=>{var i=this._labelHeight,a="vertical"===this._orient?"height":"width",r=this._labelWidths[t.depth-1];return{["vertical"===this._orient?"width":"height"]:r,[a]:i,["vertical"===this._orient?"x":"y"]:-r/2,["vertical"===this._orient?"y":"x"]:t.children&&t.depth!==this._groupBy.length?-(e.r+i):e.r}}}).render()),this}
+      */t.forEach((t,n)=>{t.data.key&&t.data.values&&(t.data=function n(t){return _u(t.values.map(t=>t.key&&t.values?n(t):t),e._aggs)}(t.data)),t.__d3plus__=!0,t.i=n});let a=this._shapeConfig.r;"function"!=typeof a&&(a=Bt(a));var h=Ot(t,t=>1===t.depth?a(t.data,t.i):0),u=Ot(t,t=>t.children?0:a(t.data,t.i)),c=Hi(t,t=>t.y);this._labelHeight=Dt([o?50:100,(c[1]-h-u)/(this._groupBy.length+1)]),this._labelWidths=mu(t,t=>t.depth).map(a=>a.values.reduce((t,n,e)=>{var i=e<a.values.length-1?a.values[e+1].x:l+this._margin[s],e=e?a.values[e-1].x:this._margin[s];return Dt([t,i-n.x,n.x-e])},l));let g=$a().domain(c).range([h+this._labelHeight,n-u-this._labelHeight]),d=(t.forEach(t=>{var n=g(t.y);r?(t.y=t.x,t.x=n):t.y=n}),{parent:this._select,enter:{transform:i},update:{transform:i}}),f=(this._shapes.push((new zc).data(t.filter(t=>1<t.depth).map(t=>Et({},t))).select(Nt("g.d3plus-Tree-Links",d).node()).config(Lt.bind(this)(this._shapeConfig,"shape","Path")).config({d:t=>{let n=this._shapeConfig.r;"function"==typeof n&&(n=n(t.data,t.i));var e=t.parent.x-t.x+(o?0:n),t=t.parent.y-t.y+(o?n:0),i=o?0:-n,a=o?-n:0;return o?`M${i},${a}C${i},${(a+t)/2} ${e},${(a+t)/2} ${e},`+t:`M${i},${a}C${(i+e)/2},${a} ${(i+e)/2},${t} ${e},`+t},id:(t,n)=>this._ids(t,n)[t.depth-1]}).render()),{id:(t,n)=>this._ids(t,n)[t.depth-1],label:(t,n)=>this._label?this._label(t.data,n):(n=this._ids(t,n).slice(0,t.depth))[n.length-1],labelConfig:{textAnchor:(t,n,e)=>o?"middle":e.children&&e.depth!==this._drawDepth+1?"end":"start",verticalAlign:(t,n,e)=>o?1===e.depth?"bottom":"top":"middle"},hitArea:(t,n,e)=>{var i=this._labelHeight,e=e.r||(o?e.height/2:e.width/2),a=this._labelWidths[t.depth-1];return{width:o?a:2*e+a,height:r?i:2*e+i,x:o?-a/2:t.children&&t.depth!==this._groupBy.length?-(e+a):-e,y:r?-i/2:t.children&&t.depth!==this._groupBy.length?-(e+this._labelHeight):-e}},labelBounds:(t,n,e)=>{var i=this._labelHeight,a=o?"height":"width",e=e.r||(o?e.height/2:e.width/2),r=this._labelWidths[t.depth-1];return{[o?"width":"height"]:r,[a]:i,[o?"x":"y"]:-r/2,[o?"y":"x"]:t.children&&t.depth!==this._groupBy.length?-(e+i):e}}});c=mu(t,t=>this._shape(t.data));let p=c.map(t=>t.key);h=this._previousShapes.filter(t=>!p.includes(t));return c.concat(h.map(t=>({key:t,values:[]}))).forEach(({key:t,values:n})=>{this._shapes.push((new Tc[t]).data(n).select(Nt("g.d3plus-Tree-"+t,d).node()).config(Lt.bind(this)(this._shapeConfig,"shape",t)).config(f).render())}),this._previousShapes=p,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(t){return arguments.length?(this._orient=t,this):this._orient}
 /**
         @memberof Tree
@@ -7281,7 +7277,7 @@ r=r<0?r%U9+U9:r)?this._+="A"+e+","+e+",0,1,"+u+","+(t-o)+","+(n-s)+"A"+e+","+e+"
         @memberof Tree
         @desc Invoked when creating a new class instance, and sets any default parameters.
         @private
-    */constructor(){super(),this._orient="vertical",this._separation=(t,n)=>t.parent===n.parent?1:2,this._shape=Bt("Circle"),this._shapeConfig=Et(this._shapeConfig,{ariaLabel:(t,n)=>this._treeData?`${this._treeData[n].depth}. ${this._drawLabel(t,n)}.`:"",labelConfig:{fontColor:"#444"},Path:{fill:"none",stroke:"#ccc",strokeWidth:1},r:Bt(5),width:Bt(10),height:Bt(10)}),this._tree=f9()}}let hx={treemapBinary:function(t,n,e,i,a){var r,o,p=t.children,s=p.length,_=new Array(s+1);for(_[0]=o=r=0;r<s;++r)_[r+1]=o+=p[r].value;!function t(n,e,i,a,r,o,s){if(e-1<=n)return(l=p[n]).x0=a,l.y0=r,l.x1=o,void(l.y1=s);var l=_[n],h=i/2+l,u=n+1,c=e-1;for(;u<c;){var g=u+c>>>1;_[g]<h?u=1+g:c=g}h-_[u-1]<_[u]-h&&n+1<u&&--u;var l=_[u]-l,d=i-l;{var f;s-r<o-a?(t(n,u,l,a,r,f=i?(a*d+o*l)/i:o,s),t(u,e,d,f,r,o,s)):(t(n,u,l,a,r,o,f=i?(r*d+s*l)/i:s),t(u,e,d,a,f,o,s))}}(0,s,t.value,n,e,i,a)},treemapDice:h9,treemapSlice:p9,treemapSliceDice:function(t,n,e,i,a){(1&t.depth?p9:h9)(t,n,e,i,a)},treemapSquarify:m9,treemapResquarify:y9};class ux extends zf{
+    */constructor(){super(),this._orient="vertical",this._separation=(t,n)=>t.parent===n.parent?1:2,this._legendTooltip=Et(this._legendTooltip,{title:ff.bind(this)}),this._previousShapes=[],this._shape=Bt("Circle"),this._shapeConfig=Et(this._shapeConfig,{ariaLabel:(t,n)=>this._treeData?`${this._treeData[n].depth}. ${this._drawLabel(t,n)}.`:"",labelConfig:{fontColor:Rh.dark},Path:{fill:"none",stroke:Rh.missing,strokeWidth:2},r:Bt(7),width:Bt(12),height:Bt(12)}),this._tooltipConfig=Et(this._tooltipConfig,{title:(t,n,e)=>this._drawLabel(t,n,e.depth-1)}),this._tree=f9()}}let hx={treemapBinary:function(t,n,e,i,a){var r,o,p=t.children,s=p.length,_=new Array(s+1);for(_[0]=o=r=0;r<s;++r)_[r+1]=o+=p[r].value;!function t(n,e,i,a,r,o,s){if(e-1<=n)return(l=p[n]).x0=a,l.y0=r,l.x1=o,void(l.y1=s);var l=_[n],h=i/2+l,u=n+1,c=e-1;for(;u<c;){var g=u+c>>>1;_[g]<h?u=1+g:c=g}h-_[u-1]<_[u]-h&&n+1<u&&--u;var l=_[u]-l,d=i-l;{var f;s-r<o-a?(t(n,u,l,a,r,f=i?(a*d+o*l)/i:o,s),t(u,e,d,f,r,o,s)):(t(n,u,l,a,r,o,f=i?(r*d+s*l)/i:s),t(u,e,d,a,f,o,s))}}(0,s,t.value,n,e,i,a)},treemapDice:h9,treemapSlice:p9,treemapSliceDice:function(t,n,e,i,a){(1&t.depth?p9:h9)(t,n,e,i,a)},treemapSquarify:m9,treemapResquarify:y9};class ux extends zf{
 /**
         @memberof Treemap
         @desc Extends the draw behavior of the abstract Viz class.

package/umd/d3plus-core.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
@@ -6851,7 +6851,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
@@ -8110,13 +8110,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 = _;
@@ -8324,8 +8320,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(_), this) : this._shape;
@@ -14000,7 +13996,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
@@ -14025,7 +14023,7 @@
           const rBufferEnd = d3Array.max(treeData, (d)=>d.children ? 0 : r(d.data, d.i));
           const yExtent = d3Array.extent(treeData, (d)=>d.y);
           this._labelHeight = d3Array.min([
-              this._orient === "vertical" ? 50 : 100,
+              isVertical ? 50 : 100,
               (yExtent[1] - rBufferRoot - rBufferEnd) / (this._groupBy.length + 1)
           ]);
           this._labelWidths = data.nest(treeData, (d)=>d.depth).map((d)=>d.values.reduce((num, v, i)=>{
@@ -14042,7 +14040,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;
@@ -14056,51 +14054,61 @@
                   transform
               }
           };
-          this._shapes.push(new Path().data(treeData.filter((d)=>d.depth > 1)).select(dom.elem("g.d3plus-Tree-Links", elemObject).node()).config(configPrep.bind(this)(this._shapeConfig, "shape", "Path")).config({
+          this._shapes.push(new Path().data(treeData.filter((d)=>d.depth > 1).map((d)=>dom.assign({}, d))).select(dom.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(dom.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 = data.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(dom.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;
       }
@@ -14126,20 +14134,27 @@
           super();
           this._orient = "vertical";
           this._separation = (a, b)=>a.parent === b.parent ? 1 : 2;
+          this._legendTooltip = dom.assign(this._legendTooltip, {
+              title: legendLabel.bind(this)
+          });
+          this._previousShapes = [];
           this._shape = constant("Circle");
           this._shapeConfig = dom.assign(this._shapeConfig, {
               ariaLabel: (d, i)=>this._treeData ? `${this._treeData[i].depth}. ${this._drawLabel(d, i)}.` : "",
               labelConfig: {
-                  fontColor: "#444"
+                  fontColor: color.colorDefaults.dark
               },
               Path: {
                   fill: "none",
-                  stroke: "#ccc",
-                  strokeWidth: 1
+                  stroke: color.colorDefaults.missing,
+                  strokeWidth: 2
               },
-              r: constant(5),
-              width: constant(10),
-              height: constant(10)
+              r: constant(7),
+              width: constant(12),
+              height: constant(12)
+          });
+          this._tooltipConfig = dom.assign(this._tooltipConfig, {
+              title: (d, i, x)=>this._drawLabel(d, i, x.depth - 1)
           });
           this._tree = d3Hierarchy.tree();
       }