@d3plus/core 3.0.0-alpha.2 → 3.0.0-alpha.3

package/es/src/charts/AreaPlot.js

@@ -69,7 +69,6 @@ var AreaPlot = /*#__PURE__*/ function(Plot) {
         _this._baseline = 0;
         _this._discrete = "x";
         _this._shape = constant("Area");
-        _this.x("x");
         return _this;
     }
     return AreaPlot;

package/es/src/charts/BarChart.js

@@ -76,7 +76,6 @@ var BarChart = /*#__PURE__*/ function(Plot) {
             return defaultLegend.bind(_this)(config, arr);
         };
         _this._shape = constant("Bar");
-        _this.x("x");
         return _this;
     }
     return BarChart;

package/es/src/charts/BoxWhisker.js

@@ -69,7 +69,6 @@ var BoxWhisker = /*#__PURE__*/ function(Plot) {
         _this = _call_super(this, BoxWhisker);
         _this._discrete = "x";
         _this._shape = constant("Box");
-        _this.x("x");
         _this._tooltipConfig = assign(_this._tooltipConfig, {
             title: function(d, i) {
                 if (!d) return "";

package/es/src/charts/BumpChart.js

@@ -75,7 +75,6 @@ var BumpChart = /*#__PURE__*/ function(Plot) {
         _this = _call_super(this, BumpChart);
         _this._discrete = "x";
         _this._shape = constant("Line");
-        _this.x("x");
         _this.y2(function(d) {
             return _this._y(d);
         });
@@ -123,7 +122,6 @@ var BumpChart = /*#__PURE__*/ function(Plot) {
 new d3plus.Plot()
   .discrete("x")
   .shape("Line")
-  .x("x")
   .y2(d => this._y(d))
   .yConfig({
     tickFormat: val => {

package/es/src/charts/LinePlot.js

@@ -68,7 +68,6 @@ var LinePlot = /*#__PURE__*/ function(Plot) {
         _this = _call_super(this, LinePlot);
         _this._discrete = "x";
         _this._shape = constant("Line");
-        _this.x("x");
         return _this;
     }
     return LinePlot;

package/es/src/charts/Pack.js

@@ -173,10 +173,11 @@ var Pack = /*#__PURE__*/ function(Viz) {
         var defaultMouseMoveShape = _this._on["mousemove.shape"];
         _this._on["mousemove.shape"] = function(d, i, x, event) {
             if (d.__d3plusTooltip__) defaultMouseMoveShape(d, i, x, event);
+            var hoverData = recursionCircles(d, [
+                d
+            ]);
             _this.hover(function(h) {
-                return recursionCircles(d, [
-                    d
-                ]).includes(h);
+                return hoverData.includes(h);
             });
         };
         _this._pack = pack();
@@ -224,13 +225,13 @@ var Pack = /*#__PURE__*/ function(Viz) {
                     values: nestedData
                 }, function(d) {
                     return d.values;
-                }).sum(this._sum).sort(this._sort)).descendants();
-                packData.forEach(function(d, i) {
+                }).sum(this._sum).sort(this._sort)).descendants().filter(function(d, i) {
                     d.__d3plus__ = true;
                     d.i = i;
-                    d.id = d.parent ? d.parent.data.key : null;
+                    d.id = d.parent ? d.parent.data.key : "root";
                     d.data.__d3plusOpacity__ = d.height ? _this._packOpacity(d.data, i) : 1;
                     d.data.__d3plusTooltip__ = !d.height ? true : false;
+                    return !d.children || d.children.length > 1;
                 });
                 this._shapes.push(new Circle().data(packData).select(elem("g.d3plus-Pack", {
                     parent: this._select,

package/es/src/charts/Plot.js

@@ -461,6 +461,7 @@ var Plot = /*#__PURE__*/ function(Viz) {
         });
         _this._x = accessor("x");
         _this._xAxis = new AxisBottom().align("end");
+        _this._xKey = "x";
         _this._xTest = new AxisBottom().align("end").gridSize(0);
         _this._xConfig = {
             gridConfig: {
@@ -481,6 +482,7 @@ var Plot = /*#__PURE__*/ function(Viz) {
         };
         _this._y = accessor("y");
         _this._yAxis = new AxisLeft().align("start");
+        _this._yKey = "y";
         _this._yTest = new AxisLeft().align("start").gridSize(0);
         _this._yConfig = {
             gridConfig: {
@@ -912,7 +914,7 @@ var Plot = /*#__PURE__*/ function(Viz) {
                     rounding: this._yDomain ? "none" : "outside",
                     scalePadding: y.padding ? y.padding() : 0
                 };
-                if (!showX) {
+                if (!showX && showY) {
                     yC.barConfig = {
                         stroke: "transparent"
                     };
@@ -1002,7 +1004,7 @@ var Plot = /*#__PURE__*/ function(Viz) {
                     rounding: this._xDomain ? "none" : "outside",
                     scalePadding: x.padding ? x.padding() : 0
                 };
-                if (!showY) {
+                if (!showY && showX) {
                     xC.barConfig = {
                         stroke: "transparent"
                     };
@@ -1791,17 +1793,6 @@ Additionally, each config object can also contain an optional "layer" key, which
         {
             /**
       @memberof Plot
-      @desc Sets the discrete axis to the specified string. If *value* is not specified, returns the current discrete axis.
-      @param {String} *value*
-      @chainable
-  */ key: "discrete",
-            value: function discrete(_) {
-                return arguments.length ? (this._discrete = _, this) : this._discrete;
-            }
-        },
-        {
-            /**
-      @memberof Plot
       @desc When the width or height of the chart is less than or equal to this pixel value, the discrete axis will not be shown. This helps produce slick sparklines. Set this value to `0` to disable the behavior entirely.
       @param {Number} *value*
       @chainable
@@ -1971,8 +1962,8 @@ Additionally, each config object can also contain an optional "layer" key, which
         {
             /**
       @memberof Plot
-      @desc Sets the x accessor to the specified function or number. If *value* is not specified, returns the current x accessor.
-      @param {Function|Number} *value*
+      @desc Sets the x accessor to the specified accessor Function or String representing which key in the data to reference. If *value* is not specified, returns the current x accessor.
+      @param {Function|String} *value*
       @chainable
   */ key: "x",
             value: function x(_) {
@@ -1989,8 +1980,8 @@ Additionally, each config object can also contain an optional "layer" key, which
         {
             /**
        @memberof Plot
-       @desc Sets the x2 accessor to the specified function or number. If *value* is not specified, returns the current x2 accessor.
-       @param {Function|Number} *value*
+       @desc Sets the x2 accessor to the specified accessor Function or String representing which key in the data to reference. If *value* is not specified, returns the current x2 accessor.
+       @param {Function|String} *value*
        @chainable
    */ key: "x2",
             value: function x2(_) {
@@ -2084,8 +2075,8 @@ Additionally, each config object can also contain an optional "layer" key, which
         {
             /**
       @memberof Plot
-      @desc Sets the y accessor to the specified function or number. If *value* is not specified, returns the current y accessor.
-      @param {Function|Number} *value*
+      @desc Sets the y accessor to the specified accessor Function or String representing which key in the data to reference. If *value* is not specified, returns the current y accessor.
+      @param {Function|String} *value*
       @chainable
   */ key: "y",
             value: function y(_) {
@@ -2102,8 +2093,8 @@ Additionally, each config object can also contain an optional "layer" key, which
         {
             /**
        @memberof Plot
-       @desc Sets the y2 accessor to the specified function or number. If *value* is not specified, returns the current y2 accessor.
-       @param {Function|Number} *value*
+       @desc Sets the y2 accessor to the specified accessor Function or String representing which key in the data to reference. If *value* is not specified, returns the current y2 accessor.
+       @param {Function|String} *value*
        @chainable
    */ key: "y2",
             value: function y2(_) {

package/es/src/charts/Viz.js

@@ -223,11 +223,13 @@ import mousemoveShape from "./events/mousemove.shape.js";
 import touchstartBody from "./events/touchstart.body.js";
 /**
  * Default padding logic that will return false if the screen is less than 600 pixels wide.
+ * @private
  */ function defaultPadding() {
     return typeof window !== "undefined" ? window.innerWidth > 600 : true;
 }
 /**
  * Turns an array of values into a list string.
+ * @private
  */ function listify(n) {
     return n.reduce(function(str, item, i) {
         if (!i) str += item;
@@ -707,6 +709,7 @@ var Viz = /*#__PURE__*/ function(BaseClass) {
             /**
    * Applies the threshold algorithm according to the type of chart used.
    * @param {Array} data The data to process.
+   * @private
    */ key: "_thresholdFunction",
             value: function _thresholdFunction(data) {
                 return data;

package/es/src/components/Tooltip.js

@@ -80,7 +80,7 @@ import { accessor, BaseClass, constant } from "../utils/index.js";
 /**
  * Creates a reference element for popper.
  * @param {Number[]} position
- * @prrivate
+ * @private
  */ function generateReference() {
     var position = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [
         0,

package/es/src/shapes/Shape.js

@@ -91,6 +91,21 @@ import { pointDistance } from "@d3plus/math";
 import { strip } from "@d3plus/text";
 import { TextBox } from "../components/index.js";
 import { accessor, BaseClass, configPrep, constant } from "../utils/index.js";
+/**
+ * @param {*} nodeList 
+ * @param {*} classNames  
+ * @private
+ */ function findLastIndexWithClass(nodeList, classNames) {
+    for(var x = 0; x < classNames.length; x++){
+        var className = classNames[x];
+        for(var i = nodeList.length - 1; i >= 0; i--){
+            if (nodeList[i].classList.contains(className)) {
+                return i; // Return the index if found
+            }
+        }
+    }
+    return 0; // Return -1 if no element is found with the class
+}
 import Image from "./Image.js";
 var Shape = /*#__PURE__*/ function(BaseClass) {
     "use strict";
@@ -405,16 +420,28 @@ var Shape = /*#__PURE__*/ function(BaseClass) {
                 this._group.selectAll("g.d3plus-".concat(this._name, "-shape, g.d3plus-").concat(this._name, "-image, g.d3plus-").concat(this._name, "-text, g.d3plus-").concat(this._name, "-hover")).selectAll(".d3plus-Shape, .d3plus-Image, .d3plus-textBox").each(function(d, i) {
                     if (!d) d = {};
                     if (!d.parentNode) d.parentNode = this.parentNode;
+                    if (!d.dataIndex) d.dataIndex = i;
+                    var dataIndex = d.dataIndex;
                     var parent = d.parentNode;
-                    if (select(this).classed("d3plus-textBox")) d = d.data;
+                    var d3plusType = select(this).classed("d3plus-textBox") ? "textBox" : select(this).classed("d3plus-Image") ? "Image" : "Shape";
+                    if (d3plusType === "textBox") d = d.data;
                     if (d.__d3plusShape__ || d.__d3plus__) {
                         while(d && (d.__d3plusShape__ || d.__d3plus__)){
                             i = d.i;
                             d = d.data;
                         }
                     } else i = that._data.indexOf(d);
-                    var group = !that._hover || typeof that._hover !== "function" || !that._hover(d, i) ? parent : that._hoverGroup.node();
-                    if (group !== this.parentNode) group.appendChild(this);
+                    var notHovering = !that._hover || typeof that._hover !== "function" || !that._hover(d, i);
+                    var group = notHovering ? parent : that._hoverGroup.node();
+                    if (group !== this.parentNode) {
+                        var offset = d3plusType === "textBox" ? findLastIndexWithClass(group.childNodes, [
+                            "d3plus-Image",
+                            "d3plus-Shape"
+                        ]) : d3plusType === "Image" ? findLastIndexWithClass(group.childNodes, [
+                            "d3plus-Shape"
+                        ]) : 0;
+                        group.insertBefore(this, group.childNodes[offset + dataIndex]);
+                    }
                     if (this.className.baseVal.includes("d3plus-Shape")) {
                         if (parent === group) select(this).call(that._applyStyle.bind(that));
                         else select(this).call(that._updateStyle.bind(that, select(this), that._hoverStyle));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@d3plus/core",
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0-alpha.3",
   "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.0-alpha.2",
-    "@d3plus/data": "3.0.0-alpha.2",
-    "@d3plus/dom": "3.0.0-alpha.2",
-    "@d3plus/format": "3.0.0-alpha.2",
-    "@d3plus/locales": "3.0.0-alpha.2",
-    "@d3plus/math": "3.0.0-alpha.2",
-    "@d3plus/text": "3.0.0-alpha.2",
+    "@d3plus/color": "3.0.0-alpha.3",
+    "@d3plus/data": "3.0.0-alpha.3",
+    "@d3plus/dom": "3.0.0-alpha.3",
+    "@d3plus/format": "3.0.0-alpha.3",
+    "@d3plus/locales": "3.0.0-alpha.3",
+    "@d3plus/math": "3.0.0-alpha.3",
+    "@d3plus/text": "3.0.0-alpha.3",
     "@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.0-alpha.2
+  @d3plus/core v3.0.0-alpha.3
   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
@@ -5059,14 +5059,6 @@
   /**
       @namespace {Object} formatLocale
       @desc A set of default locale formatters used when assigning suffixes and currency in numbers.
-        *
-        * | Name | Default | Description |
-        * |---|---|---|
-        * | separator | "" | Separation between the number with the suffix. |
-        * | suffixes | [] | List of suffixes used to format numbers. |
-        * | grouping | [3] | The array of group sizes, |
-        * | delimiters | {thousands: ",", decimal: "."} | Decimal and group separators. |
-        * | currency | ["$", ""] | The currency prefix and suffix. |
   */ var formatLocale$2 = {
       "ar-SA": {
           separator: "",
@@ -20604,15 +20596,6 @@
   /**
       @namespace {Object} colorDefaults
       @desc A set of default color values used when assigning colors based on data.
-        *
-        * | Name | Default | Description |
-        * |---|---|---|
-        * | dark | gray-7 | Used in the [contrast](#contrast) function when the color given is very light. |
-        * | light | gray-0 | Used in the [contrast](#contrast) function when the color given is very dark. |
-        * | missing | gray-4 | Used in the [assign](#assign) function when the value passed is `null` or `undefined`. |
-        * | off | red-9 | Used in the [assign](#assign) function when the value passed is `false`. |
-        * | on | green-9 | Used in the [assign](#assign) function when the value passed is `true`. |
-        * | scale | [indigo-900, yellow-600, red-900, green-900, orange-600, grape-900, cyan-600, pink-600, lime-600, blue-300, pink-300, lime-300, violet-300, cyan-100, orange-100, green-100, grape-100, red-100] | An ordinal scale used in the [assign](#assign) function for non-valid color strings and numbers. |
   */ var defaults = {
       dark: openColor$2.colors.gray[700],
       light: openColor$2.colors.gray[50],
@@ -22155,7 +22138,7 @@
   var angleStep = 5; // step size for angles (in degrees); has linear impact on running time
   var polyCache = {};
   /**
-      @typedef {Object} LargestRect
+      @typedef {Object} largestRect
       @desc The returned Object of the largestRect function.
       @property {Number} width The width of the rectangle
       @property {Number} height The height of the rectangle
@@ -22180,7 +22163,7 @@
       @param {Number} [options.tolerance = 0.02] The simplification tolerance factor, between 0 and 1. A larger tolerance corresponds to more extensive simplification.
       @param {Array} [options.origin] The center point of the rectangle. If specified, the rectangle will be fixed at that point, otherwise the algorithm optimizes across all possible points. The given value can be either a two dimensional array specifying the x and y coordinate of the origin or an array of two dimensional points specifying multiple possible center points of the rectangle.
       @param {Boolean} [options.cache] Whether or not to cache the result, which would be used in subsequent calculations to preserve consistency and speed up calculation time.
-      @return {LargestRect}
+      @return {largestRect}
   */ function largestRect(poly) {
       var options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
       if (poly.length < 3) {
@@ -23171,6 +23154,21 @@
       }
   }
 
+  /**
+   * @param {*} nodeList 
+   * @param {*} classNames  
+   * @private
+   */ function findLastIndexWithClass(nodeList, classNames) {
+      for(let x = 0; x < classNames.length; x++){
+          const className = classNames[x];
+          for(let i = nodeList.length - 1; i >= 0; i--){
+              if (nodeList[i].classList.contains(className)) {
+                  return i; // Return the index if found
+              }
+          }
+      }
+      return 0; // Return -1 if no element is found with the class
+  }
   class Shape extends BaseClass {
       /**
         @memberof Shape
@@ -23366,16 +23364,28 @@
           this._group.selectAll(`g.d3plus-${this._name}-shape, g.d3plus-${this._name}-image, g.d3plus-${this._name}-text, g.d3plus-${this._name}-hover`).selectAll(".d3plus-Shape, .d3plus-Image, .d3plus-textBox").each(function(d, i) {
               if (!d) d = {};
               if (!d.parentNode) d.parentNode = this.parentNode;
+              if (!d.dataIndex) d.dataIndex = i;
+              const dataIndex = d.dataIndex;
               const parent = d.parentNode;
-              if (select(this).classed("d3plus-textBox")) d = d.data;
+              const d3plusType = select(this).classed("d3plus-textBox") ? "textBox" : select(this).classed("d3plus-Image") ? "Image" : "Shape";
+              if (d3plusType === "textBox") d = d.data;
               if (d.__d3plusShape__ || d.__d3plus__) {
                   while(d && (d.__d3plusShape__ || d.__d3plus__)){
                       i = d.i;
                       d = d.data;
                   }
               } else i = that._data.indexOf(d);
-              const group = !that._hover || typeof that._hover !== "function" || !that._hover(d, i) ? parent : that._hoverGroup.node();
-              if (group !== this.parentNode) group.appendChild(this);
+              const notHovering = !that._hover || typeof that._hover !== "function" || !that._hover(d, i);
+              const group = notHovering ? parent : that._hoverGroup.node();
+              if (group !== this.parentNode) {
+                  const offset = d3plusType === "textBox" ? findLastIndexWithClass(group.childNodes, [
+                      "d3plus-Image",
+                      "d3plus-Shape"
+                  ]) : d3plusType === "Image" ? findLastIndexWithClass(group.childNodes, [
+                      "d3plus-Shape"
+                  ]) : 0;
+                  group.insertBefore(this, group.childNodes[offset + dataIndex]);
+              }
               if (this.className.baseVal.includes("d3plus-Shape")) {
                   if (parent === group) select(this).call(that._applyStyle.bind(that));
                   else select(this).call(that._updateStyle.bind(that, select(this), that._hoverStyle));
@@ -31577,7 +31587,7 @@
   /**
    * Creates a reference element for popper.
    * @param {Number[]} position
-   * @prrivate
+   * @private
    */ function generateReference(position = [
       0,
       0
@@ -33604,11 +33614,13 @@
 
   /**
    * Default padding logic that will return false if the screen is less than 600 pixels wide.
+   * @private
    */ function defaultPadding() {
       return typeof window !== "undefined" ? window.innerWidth > 600 : true;
   }
   /**
    * Turns an array of values into a list string.
+   * @private
    */ function listify(n) {
       return n.reduce((str, item, i)=>{
           if (!i) str += item;
@@ -33806,6 +33818,7 @@
       /**
      * Applies the threshold algorithm according to the type of chart used.
      * @param {Array} data The data to process.
+     * @private
      */ _thresholdFunction(data) {
           return data;
       }
@@ -35781,7 +35794,7 @@
               rounding: this._yDomain ? "none" : "outside",
               scalePadding: y.padding ? y.padding() : 0
           };
-          if (!showX) {
+          if (!showX && showY) {
               yC.barConfig = {
                   stroke: "transparent"
               };
@@ -35851,7 +35864,7 @@
               rounding: this._xDomain ? "none" : "outside",
               scalePadding: x.padding ? x.padding() : 0
           };
-          if (!showY) {
+          if (!showY && showX) {
               xC.barConfig = {
                   stroke: "transparent"
               };
@@ -36471,14 +36484,6 @@
      */ confidenceConfig(_) {
           return arguments.length ? (this._confidenceConfig = assign(this._confidenceConfig, _), this) : this._confidenceConfig;
       }
-      /**
-        @memberof Plot
-        @desc Sets the discrete axis to the specified string. If *value* is not specified, returns the current discrete axis.
-        @param {String} *value*
-        @chainable
-    */ discrete(_) {
-          return arguments.length ? (this._discrete = _, this) : this._discrete;
-      }
       /**
         @memberof Plot
         @desc When the width or height of the chart is less than or equal to this pixel value, the discrete axis will not be shown. This helps produce slick sparklines. Set this value to `0` to disable the behavior entirely.
@@ -36605,8 +36610,8 @@
       }
       /**
         @memberof Plot
-        @desc Sets the x accessor to the specified function or number. If *value* is not specified, returns the current x accessor.
-        @param {Function|Number} *value*
+        @desc Sets the x accessor to the specified accessor Function or String representing which key in the data to reference. If *value* is not specified, returns the current x accessor.
+        @param {Function|String} *value*
         @chainable
     */ x(_) {
           if (arguments.length) {
@@ -36620,8 +36625,8 @@
       }
       /**
          @memberof Plot
-         @desc Sets the x2 accessor to the specified function or number. If *value* is not specified, returns the current x2 accessor.
-         @param {Function|Number} *value*
+         @desc Sets the x2 accessor to the specified accessor Function or String representing which key in the data to reference. If *value* is not specified, returns the current x2 accessor.
+         @param {Function|String} *value*
          @chainable
      */ x2(_) {
           if (arguments.length) {
@@ -36691,8 +36696,8 @@
       }
       /**
         @memberof Plot
-        @desc Sets the y accessor to the specified function or number. If *value* is not specified, returns the current y accessor.
-        @param {Function|Number} *value*
+        @desc Sets the y accessor to the specified accessor Function or String representing which key in the data to reference. If *value* is not specified, returns the current y accessor.
+        @param {Function|String} *value*
         @chainable
     */ y(_) {
           if (arguments.length) {
@@ -36706,8 +36711,8 @@
       }
       /**
          @memberof Plot
-         @desc Sets the y2 accessor to the specified function or number. If *value* is not specified, returns the current y2 accessor.
-         @param {Function|Number} *value*
+         @desc Sets the y2 accessor to the specified accessor Function or String representing which key in the data to reference. If *value* is not specified, returns the current y2 accessor.
+         @param {Function|String} *value*
          @chainable
      */ y2(_) {
           if (arguments.length) {
@@ -36968,6 +36973,7 @@
           });
           this._x = accessor("x");
           this._xAxis = new AxisBottom().align("end");
+          this._xKey = "x";
           this._xTest = new AxisBottom().align("end").gridSize(0);
           this._xConfig = {
               gridConfig: {
@@ -36988,6 +36994,7 @@
           };
           this._y = accessor("y");
           this._yAxis = new AxisLeft().align("start");
+          this._yKey = "y";
           this._yTest = new AxisLeft().align("start").gridSize(0);
           this._yConfig = {
               gridConfig: {
@@ -37017,7 +37024,6 @@
           this._baseline = 0;
           this._discrete = "x";
           this._shape = constant$9("Area");
-          this.x("x");
       }
   }
 
@@ -37038,7 +37044,6 @@
               return defaultLegend.bind(this)(config, arr);
           };
           this._shape = constant$9("Bar");
-          this.x("x");
       }
   }
 
@@ -37051,7 +37056,6 @@
           super();
           this._discrete = "x";
           this._shape = constant$9("Box");
-          this.x("x");
           this._tooltipConfig = assign(this._tooltipConfig, {
               title: (d, i)=>{
                   if (!d) return "";
@@ -37076,7 +37080,6 @@
           super();
           this._discrete = "x";
           this._shape = constant$9("Line");
-          this.x("x");
           this.y2((d)=>this._y(d));
           this.yConfig({
               tickFormat: (val)=>{
@@ -51773,7 +51776,6 @@
           super();
           this._discrete = "x";
           this._shape = constant$9("Line");
-          this.x("x");
       }
   }
 
@@ -54122,13 +54124,13 @@
           ])(hierarchy({
               key: nestedData.key,
               values: nestedData
-          }, (d)=>d.values).sum(this._sum).sort(this._sort)).descendants();
-          packData.forEach((d, i)=>{
+          }, (d)=>d.values).sum(this._sum).sort(this._sort)).descendants().filter((d, i)=>{
               d.__d3plus__ = true;
               d.i = i;
-              d.id = d.parent ? d.parent.data.key : null;
+              d.id = d.parent ? d.parent.data.key : "root";
               d.data.__d3plusOpacity__ = d.height ? this._packOpacity(d.data, i) : 1;
               d.data.__d3plusTooltip__ = !d.height ? true : false;
+              return !d.children || d.children.length > 1;
           });
           this._shapes.push(new Circle().data(packData).select(elem("g.d3plus-Pack", {
               parent: this._select,
@@ -54218,9 +54220,10 @@
           const defaultMouseMoveShape = this._on["mousemove.shape"];
           this._on["mousemove.shape"] = (d, i, x, event)=>{
               if (d.__d3plusTooltip__) defaultMouseMoveShape(d, i, x, event);
-              this.hover((h)=>recursionCircles(d, [
-                      d
-                  ]).includes(h));
+              const hoverData = recursionCircles(d, [
+                  d
+              ]);
+              this.hover((h)=>hoverData.includes(h));
           };
           this._pack = pack();
           this._packOpacity = constant$9(0.25);