error: transition 1 not found

[vegertar]

Expected Behavior

Render correctly

Current Behavior

error: transition 1 not found And the error could be fixed by applying the modification advice from MB

@@ -230,7 +230,7 @@ export default class TextBox extends BaseClass {

     }, []), d => this._id(d.data, d.i));

-    const t = transition().duration(this._duration);
+    const t = this._select.transition().duration(this._duration);

     if (this._duration === 0) {

Steps to Reproduce (for bugs)

1. It's not easy to reproduce in a very simple example, but on my web-component, it always fail when passing the node from an existed selection to TextBox::select

Your Environment

• Browser Name: Chrome v101
• Operating System and Version: Windows 10

[davelandry]

This is a great find @vegertar, thank you! If you have the time, would you mind submitting a PR with this fix so that I can test and merge it?

The source code can be found here, and here are some notes on the dev environment: https://github.com/d3plus/d3plus-text/blob/master/.github/CONTRIBUTING.md

[vegertar]

Yes, I would love to make a PR, but I am not sure if my test worked or not until I have configured successfully a testing-ready d3plus-text environment on Windows. Although the similar snippet below has tested outside of d3plus-text:

diff --git a/src/TextBox.js b/src/TextBox.js
index ed7397e..e9d81d9 100644
--- a/src/TextBox.js
+++ b/src/TextBox.js
@@ -230,7 +230,7 @@ export default class TextBox extends BaseClass {

     }, []), d => this._id(d.data, d.i));

-    const t = transition().duration(this._duration);
+    const t = this._select.transition().duration(this._duration);

     if (this._duration === 0) {

diff --git a/test/TextBox.js b/test/TextBox.js
index 8e94159..9ba794f 100644
--- a/test/TextBox.js
+++ b/test/TextBox.js
@@ -71,6 +71,39 @@ test("TextBox", function *(assert) {
               tspans[4].textContent === "sentence" &&
               tspans[5].textContent === "for me.", "font resizing");

+  window.customElements.define("my-component", class extends HTMLElement {
+    constructor() {
+      super();
+      this.attachShadow({mode: "open"});
+
+      const ns = "http://www.w3.org/2000/svg";
+      this.svg = this.shadowRoot.appendChild(document.createElementNS(ns, "svg"));
+      this.cb = null;
+      this.testBox = new TextBox()
+        .select(this.svg)
+        .data([{text: "Hello D3plus, please wrap this sentence for me."}])
+        .fontSize(14)
+        .height(height)
+        .width(width)
+        .x(x)
+        .y(y);
+    }
+
+    connectedCallback() {
+      this.testBox.render(this.cb);
+    }
+  });
+
+  const myComponent = document.createElement("my-component");
+
+  yield cb => {
+    myComponent.cb = cb;
+    document.body.appendChild(myComponent);
+  };
+
+  tspans = myComponent.shadowRoot.getElementsByTagName("tspan");
+  assert.ok(tspans[0].textContent === "Hello D3plus, please wrap" &&
+              tspans[1].textContent === "this sentence for me.", "wrapped text");
 });

 export default test;

[davelandry]

@vegertar I'm okay not having a formal test assertion for this fix, as long as things seem to render correctly in a test HTML file that we fiddle with using npm run dev and the dev/ directory