@cardenelabs/cdl 0.37.0 → 0.39.0

package/dist/{render-BYdmSviQ.d.cts → render-B1ArenZ7.d.cts}

@@ -2347,11 +2347,15 @@ type CdlPhase = {
      * | `chart-line` | 左端 | 線が右へ伸びる | 点と数字は線の先が届いた時 |
      * | `chart-bar` | 横軸 | 棒が上へ伸びる | 数字は棒の頭に付いて動く |
      * | `chart-pie` | 12 時 | 扇が時計回りに開く | 凡例はその扇が開き始めた時 |
+     * | `chart-slope` | 左の軸 | 線が右の軸へ伸びる | 右の値は線が右の軸に着いた時 |
      * | `journey-map` | 左端 | 気持ちの線が右へ伸びる | 段はその点に線の先が届いた時 |
      * | `mind-map` | 中心 | 枝が段ごとに外へ伸びる | 箱はその枝が届いた時 |
      * | `tree-hierarchy` | 根 | 枝が段ごとに下へ伸びる | 箱はその枝が届いた時 |
      * | `gantt-timeline` | 各帯の始端 | 帯が右へ伸びる | 依存の矢印は帯が出揃った時 |
      * | `funnel-stages` | 上端 | 段が上から順に積まれる | 件数と離脱率はその段が出切った時 |
+     * | `chart-gauge` | 9 時 | 弧が上を通って 3 時へ伸びる | 合計と内訳は最初から出る |
+     * | `chart-radial` | 12 時 | 各輪が時計回りに開く | 軌道と一覧は最初から出る |
+     * | `chart-stacked-bar` | 左端 | 帯が右へ伸びる | 区画の字はその区画が広がった時 |
      *
      * 対象種別の一覧は `validate.ts` の `DRAW_KINDS` が持つ。
      *

package/dist/{render-BYdmSviQ.d.ts → render-B1ArenZ7.d.ts}

@@ -2347,11 +2347,15 @@ type CdlPhase = {
      * | `chart-line` | 左端 | 線が右へ伸びる | 点と数字は線の先が届いた時 |
      * | `chart-bar` | 横軸 | 棒が上へ伸びる | 数字は棒の頭に付いて動く |
      * | `chart-pie` | 12 時 | 扇が時計回りに開く | 凡例はその扇が開き始めた時 |
+     * | `chart-slope` | 左の軸 | 線が右の軸へ伸びる | 右の値は線が右の軸に着いた時 |
      * | `journey-map` | 左端 | 気持ちの線が右へ伸びる | 段はその点に線の先が届いた時 |
      * | `mind-map` | 中心 | 枝が段ごとに外へ伸びる | 箱はその枝が届いた時 |
      * | `tree-hierarchy` | 根 | 枝が段ごとに下へ伸びる | 箱はその枝が届いた時 |
      * | `gantt-timeline` | 各帯の始端 | 帯が右へ伸びる | 依存の矢印は帯が出揃った時 |
      * | `funnel-stages` | 上端 | 段が上から順に積まれる | 件数と離脱率はその段が出切った時 |
+     * | `chart-gauge` | 9 時 | 弧が上を通って 3 時へ伸びる | 合計と内訳は最初から出る |
+     * | `chart-radial` | 12 時 | 各輪が時計回りに開く | 軌道と一覧は最初から出る |
+     * | `chart-stacked-bar` | 左端 | 帯が右へ伸びる | 区画の字はその区画が広がった時 |
      *
      * 対象種別の一覧は `validate.ts` の `DRAW_KINDS` が持つ。
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.37.0",
+  "version": "0.39.0",
   "description": "CDL (Chainome Diagram Language). Mermaid-like declarative DSL that compiles to animated SVG diagrams. Built for blockchain / Solidity flows, generic enough for sequence / flow / state / ER / topology diagrams.",
   "license": "MIT",
   "author": "cardene777",

package/src/anim/core/timeline.ts

@@ -60,6 +60,8 @@ export class Timeline {
   private rafHandle: number | null = null;
   private phaseIndex = 0;
   private phaseProgress = 0;
+  /** 曲線を通す前の進み (cdl#711)。 経過時間そのものの割合で、 描く動きが読む */
+  private phaseLinearProgress = 0;
   private phaseStartedAt = 0;
   private status: TimelineStatus = "idle";
   /**
@@ -75,7 +77,7 @@ export class Timeline {
    */
   private readonly initialState: {
     phaseIndex: number;
-    phaseProgress: number;
+    phaseLinearProgress: number;
     status: TimelineStatus;
   };
 
@@ -94,12 +96,12 @@ export class Timeline {
     const initial = options.initialPhaseIndex;
     if (initial != null && initial > 0 && initial < phases.length) {
       this.phaseIndex = initial;
-      this.phaseProgress = 1;
+      this.setProgress(1);
       this.status = initial === phases.length - 1 ? "settled" : "paused";
     }
     this.initialState = {
       phaseIndex: this.phaseIndex,
-      phaseProgress: this.phaseProgress,
+      phaseLinearProgress: this.phaseLinearProgress,
       status: this.status,
     };
   }
@@ -133,6 +135,7 @@ export class Timeline {
       cached.status === this.status &&
       cached.phaseIndex === this.phaseIndex &&
       cached.phaseProgress === this.phaseProgress &&
+      cached.phaseLinearProgress === this.phaseLinearProgress &&
       cached.totalPhases === this.phases.length
     ) {
       return cached;
@@ -141,6 +144,7 @@ export class Timeline {
       status: this.status,
       phaseIndex: this.phaseIndex,
       phaseProgress: this.phaseProgress,
+      phaseLinearProgress: this.phaseLinearProgress,
       totalPhases: this.phases.length,
     };
     this.cachedSnapshot = next;
@@ -168,7 +172,7 @@ export class Timeline {
     const clamped = Math.max(0, Math.min(this.phases.length - 1, index));
     this.cancelRaf();
     this.phaseIndex = clamped;
-    this.phaseProgress = 1;
+    this.setProgress(1);
     this.status = clamped === this.phases.length - 1 ? "settled" : "paused";
     this.emit();
   }
@@ -212,7 +216,7 @@ export class Timeline {
     if (this.phaseIndex <= 0) return;
     this.cancelRaf();
     this.phaseIndex -= 1;
-    this.phaseProgress = 1;
+    this.setProgress(1);
     this.status = "paused";
     this.emit();
   }
@@ -220,7 +224,7 @@ export class Timeline {
   reset(): void {
     this.cancelRaf();
     this.phaseIndex = 0;
-    this.phaseProgress = 0;
+    this.setProgress(0);
     this.status = "idle";
     this.emit();
   }
@@ -242,7 +246,7 @@ export class Timeline {
     this.subscribers.clear();
     this.status = this.initialState.status;
     this.phaseIndex = this.initialState.phaseIndex;
-    this.phaseProgress = this.initialState.phaseProgress;
+    this.setProgress(this.initialState.phaseLinearProgress);
   }
 
   // ─── internals ───────────────────────────────────────────────
@@ -284,7 +288,7 @@ export class Timeline {
   }
 
   private beginPhaseTransition(): void {
-    this.phaseProgress = 0;
+    this.setProgress(0);
     this.phaseStartedAt = performance.now();
     this.cancelRaf();
     const step = (now: number) => {
@@ -292,13 +296,13 @@ export class Timeline {
         this.autoAdvanceMsOverride ?? this.getPhase().durationMs ?? 600;
       const elapsed = now - this.phaseStartedAt;
       const linearT = clamp01(elapsed / duration);
-      this.phaseProgress = this.easing(linearT);
+      this.setProgress(linearT);
       this.emit();
       if (linearT < 1) {
         this.rafHandle = requestAnimationFrame(step);
         return;
       }
-      this.phaseProgress = 1;
+      this.setProgress(1);
       this.emit();
       if (this.status === "playing") {
         // 自動進行中は次 Phase へ
@@ -315,6 +319,20 @@ export class Timeline {
     this.rafHandle = requestAnimationFrame(step);
   }
 
+  /**
+   * 段の進みを 2 つ同時に置く (cdl#711)。
+   *
+   * **代入する場所を 1 つに閉じる**。 曲げた進みと曲げる前の進みを別々に書くと、
+   * どちらかを更新し忘れた経路が「前の段の値のまま」 で残る。
+   *
+   * 両端 (0 と 1) は曲線を通さず、 そのまま置く。 曲線は差し替えられる欄なので、
+   * `easing(1)` が 1 を返す保証がない。 段の始まりと終わりの値は曲線に委ねない。
+   */
+  private setProgress(linear: number): void {
+    this.phaseLinearProgress = linear;
+    this.phaseProgress = linear <= 0 ? 0 : linear >= 1 ? 1 : this.easing(linear);
+  }
+
   private cancelRaf(): void {
     if (this.rafHandle != null) {
       cancelAnimationFrame(this.rafHandle);

package/src/anim/core/types.ts

@@ -37,6 +37,18 @@ export type TimelineState = {
   phaseIndex: number;
   /** 現在 Phase 内の進行度 (0..1)、 視覚要素の補間に使う */
   phaseProgress: number;
+  /**
+   * 曲線を通す前の進行度 (0..1、 cdl#711)。 経過時間そのものの割合。
+   *
+   * `phaseProgress` は既定で `easeOutQuint` を通るため前半に動きが寄る。
+   * **値が落ち着く動きには合うが、 線を引く動きには合わない** =
+   * `1.2s` の段で半分に達するのが 158 ms になり、 折れ線の 5 点のうち 4 点が
+   * 292 ms の間に出てしまう (実測)。
+   *
+   * 描く動き (`draw` の node と伸ばす edge) はこちらを読む。
+   * 両端 (0 と 1) は 2 つとも同じ値になる。
+   */
+  phaseLinearProgress: number;
   /** 全 Phase 数 */
   totalPhases: number;
 };

package/src/kinds/chart-gauge.tsx

@@ -1,9 +1,11 @@
-import { type JSX } from "react";
+import { useId, type JSX } from "react";
 import type { LaidNode, Tone } from "../types";
 import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData } from "../render/payload-binding";
 import { textWidth } from "./text-width";
 import { 実値表記, 割合表記 } from "./chart-number";
+import { 進みを畳む } from "./draw-progress";
+import { 扇形の切り抜き } from "./draw-arc";
 
 /**
  * chart-gauge kind ... 上半分の弧で内訳を示し、 合計を主役に置く図 (cdl#549)。
@@ -27,15 +29,28 @@ import { 実値表記, 割合表記 } from "./chart-number";
  *
  * 内訳には実値と割合の両方を置く。 合計が主役の図で内訳が割合しか持たないと、 「合計の何割」
  * は分かっても「いくつ」 が分からず、 合計との関係を読み手が暗算することになる。
+ *
+ * ## 段の `draw` では 9 時から弧が伸びる (cdl#715)
+ *
+ * 伸びる向きは弧の向きそのもので、 図の意味から一意に決まる。
+ *
+ * **切り抜くのは弧だけ**。 合計の字と内訳の段は最初から出す = 合計はこの種別の主役なので、
+ * 左から半分ずつ現れると読めない。 内訳は弧の外にある別の一覧で、 弧の開きに従う理由がない。
  */
 export function ChartGaugeNode({
   node,
   active,
   stateValues = {},
+  drawing = false,
+  progress = 1,
 }: {
   node: LaidNode;
   active: boolean;
   stateValues?: Record<string, string>;
+  /** この phase の `draw` に載っているか (cdl#715) */
+  drawing?: boolean;
+  /** phase の進み (0→1)。 `drawing` が true の時だけ読む */
+  progress?: number;
 }): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -112,6 +127,24 @@ export function ChartGaugeNode({
   const 内訳の幅 = 使える幅 / Math.max(data.length, 1);
   const 内訳のy = cy + 弧と内訳の間;
 
+  /** 弧がどこまで伸びたか (0..1、 cdl#715)。 畳み方は `draw-progress.ts` が持つ */
+  const 伸び = 進みを畳む(drawing, progress);
+  // SVG の id は document 全体の名前空間。 node id は図の中でだけ一意なので instance id で分ける
+  const 切り抜きid = `cdl-gauge-draw-${useId().replace(/[^A-Za-z0-9_-]/g, "")}`;
+  const 弧たち = slices.map((s, idx) => (
+    <path
+      key={`arc-${idx}`}
+      data-cdl-role="chart-gauge-arc"
+      data-cdl-unresolved={s.d.unresolved ? "true" : undefined}
+      d={s.path}
+      fill={arcColor(s.d.tone, idx)}
+      // 区切りは地の色の余白で取る。 線だと弧が分断されて 1 つの量に見えない
+      stroke="var(--cdl-node-fill, #ffffff)"
+      strokeWidth={3}
+      strokeLinejoin="round"
+    />
+  ));
+
   return (
     <g transform={`translate(${x0} ${y0})`}>
       <rect
@@ -126,19 +159,21 @@ export function ChartGaugeNode({
         strokeWidth={active ? 3 : 1.25}
       />
 
-      {slices.map((s, idx) => (
-        <path
-          key={`arc-${idx}`}
-          data-cdl-role="chart-gauge-arc"
-          data-cdl-unresolved={s.d.unresolved ? "true" : undefined}
-          d={s.path}
-          fill={arcColor(s.d.tone, idx)}
-          // 区切りは地の色の余白で取る。 線だと弧が分断されて 1 つの量に見えない
-          stroke="var(--cdl-node-fill, #ffffff)"
-          strokeWidth={3}
-          strokeLinejoin="round"
-        />
-      ))}
+      {drawing && (
+        <defs>
+          {/*
+            9 時から上を通って 3 時へ開く切り抜き (cdl#715)。 半径は弧の外側に少し足す =
+            弧の縁が切り抜きの縁と重なると、 開き切った時に外周が痩せて見える。
+
+            **弧の `d` は触らない** = 形から量を測る利用側が、 進みの途中で別の値を読まない。
+          */}
+          <clipPath id={切り抜きid}>
+            {扇形の切り抜き(cx, cy, radius + 2, 伸び, Math.PI, Math.PI)}
+          </clipPath>
+        </defs>
+      )}
+      {/* 描く指定が無い図には包みを足さず、 従来の DOM 構造を保つ */}
+      {drawing ? <g clipPath={`url(#${切り抜きid})`}>{弧たち}</g> : 弧たち}
 
       {/*
         合計。 この種別の主役なので図の中でいちばん大きい字にするが、 **弧の内側に収める**。

package/src/kinds/chart-pie.tsx

@@ -3,6 +3,7 @@ import type { ChartPieForm, LaidNode, Tone } from "../types";
 import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData, type ResolvedChartDatum } from "../render/payload-binding";
 import { 進みを畳む } from "./draw-progress";
+import { 扇形の切り抜き } from "./draw-arc";
 import { textWidth } from "./text-width";
 import { 実値表記, 割合表記 } from "./chart-number";
 
@@ -687,22 +688,6 @@ function 輪の道(cx: number, cy: number, R: number, r: number, a0: number, a1:
   );
 }
 
-/**
- * 12 時から時計回りに開く扇形 (cdl#516)。 円を切り抜く形に使う。
- *
- * 1 周ちょうどは扇形で表せない (始点と終点が同じ点になり、 弧の向きが決まらない)。
- * その時だけ円をそのまま返す = 進み 1 で図が消える形を避ける。
- */
-function 扇形の切り抜き(cx: number, cy: number, r: number, 開き: number): JSX.Element | null {
-  if (開き <= 0) return null;
-  if (開き >= 1) return <circle cx={cx} cy={cy} r={r} />;
-  const a0 = -Math.PI / 2;
-  const a1 = a0 + 開き * Math.PI * 2;
-  const large = 開き > 0.5 ? 1 : 0;
-  const d = `M ${cx} ${cy} L ${cx + r * Math.cos(a0)} ${cy + r * Math.sin(a0)} A ${r} ${r} 0 ${large} 1 ${cx + r * Math.cos(a1)} ${cy + r * Math.sin(a1)} Z`;
-  return <path d={d} />;
-}
-
 /**
  * 扇の色 (cdl#546)。
  *

package/src/kinds/chart-radial.tsx

@@ -1,9 +1,11 @@
-import { type JSX } from "react";
+import { useId, type JSX } from "react";
 import type { LaidNode, Tone } from "../types";
 import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData } from "../render/payload-binding";
 import { textWidth } from "./text-width";
 import { 実値表記, 割合表記 } from "./chart-number";
+import { 進みを畳む } from "./draw-progress";
+import { 扇形の切り抜き } from "./draw-arc";
 
 /**
  * chart-radial kind ... 1 件を 1 本の弧にして内側から重ね、 長さで比べる図 (cdl#550)。
@@ -27,15 +29,29 @@ import { 実値表記, 割合表記 } from "./chart-number";
  *
  * 弧のそばに置くと、 内側の弧ほど場所が狭くなって字が入らない。 左端に縦へ並べると件数が
  * 増えても一覧性が落ちず、 弧の並び順と行の並び順が対応する。
+ *
+ * ## 段の `draw` では 12 時から各輪が開く (cdl#715)
+ *
+ * 弧の向きそのままで、 全部の輪が同時に開く。 外から順に開く案は採らない = 内側の輪だけ
+ * 軌道が空のまま残る時間が長くなり、 「まだ描いていない」 と「本当に 0」 が見分けられない。
+ *
+ * **切り抜くのは取り分の弧だけ**。 軌道と一覧は最初から出す = 軌道は「あとどれだけで一周か」
+ * を示す枠なので、 一緒に伸ばすと比べる相手が無いまま弧だけが伸びる。
  */
 export function ChartRadialNode({
   node,
   active,
   stateValues = {},
+  drawing = false,
+  progress = 1,
 }: {
   node: LaidNode;
   active: boolean;
   stateValues?: Record<string, string>;
+  /** この phase の `draw` に載っているか (cdl#715) */
+  drawing?: boolean;
+  /** phase の進み (0→1)。 `drawing` が true の時だけ読む */
+  progress?: number;
 }): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -99,6 +115,22 @@ export function ChartRadialNode({
 
   const 一覧の始まり = PAD + (使える高さ - 行の高さ * data.length) / 2 + 行の高さ / 2;
 
+  /** 弧がどこまで開いたか (0..1、 cdl#715)。 畳み方は `draw-progress.ts` が持つ */
+  const 開き = 進みを畳む(drawing, progress);
+  // SVG の id は document 全体の名前空間。 node id は図の中でだけ一意なので instance id で分ける
+  const 切り抜きid = `cdl-radial-draw-${useId().replace(/[^A-Za-z0-9_-]/g, "")}`;
+  const 取り分たち = rings.map((r, idx) =>
+    r.取り分 === null ? null : (
+      <path
+        key={`arc-${idx}`}
+        data-cdl-role="chart-radial-arc"
+        data-cdl-unresolved={r.d.unresolved ? "true" : undefined}
+        d={r.取り分}
+        fill={arcColor(r.d.tone, idx)}
+      />
+    ),
+  );
+
   return (
     <g transform={`translate(${x0} ${y0})`}>
       <rect
@@ -127,17 +159,19 @@ export function ChartRadialNode({
         />
       ))}
 
-      {rings.map((r, idx) =>
-        r.取り分 === null ? null : (
-          <path
-            key={`arc-${idx}`}
-            data-cdl-role="chart-radial-arc"
-            data-cdl-unresolved={r.d.unresolved ? "true" : undefined}
-            d={r.取り分}
-            fill={arcColor(r.d.tone, idx)}
-          />
-        ),
+      {drawing && (
+        <defs>
+          {/*
+            12 時から時計回りに開く切り抜き (cdl#715)。 半径はいちばん外の帯の外側まで取る =
+            全部の輪が同じ 1 つの切り抜きで開く。
+
+            **弧の `d` は触らない** = 形から量を測る利用側が、 進みの途中で別の値を読まない。
+          */}
+          <clipPath id={切り抜きid}>{扇形の切り抜き(弧のcx, cy, 外半径 + 帯の幅, 開き)}</clipPath>
+        </defs>
       )}
+      {/* 描く指定が無い図には包みを足さず、 従来の DOM 構造を保つ */}
+      {drawing ? <g clipPath={`url(#${切り抜きid})`}>{取り分たち}</g> : 取り分たち}
 
       {/* 一覧。 行の並びが弧の並び (外から内へ) と対応する */}
       {data.map((d, idx) => {

package/src/kinds/chart-stacked-bar.tsx

@@ -1,9 +1,10 @@
-import { type JSX } from "react";
+import { useId, type JSX } from "react";
 import type { LaidNode, Tone } from "../types";
 import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData, type ResolvedChartDatum } from "../render/payload-binding";
 import { textWidth } from "./text-width";
 import { 実値表記, 割合表記 } from "./chart-number";
+import { 進みを畳む } from "./draw-progress";
 
 /**
  * chart-stacked-bar kind ... 1 本の帯を割合で区切り、時点を並べて変化を見せる図 (cdl#551)。
@@ -27,6 +28,15 @@ import { 実値表記, 割合表記 } from "./chart-number";
  *
  * 細い区画に字を詰めると隣の区画へはみ出して、どちらの値か読めなくなる。
  * 入らない区画は字を描かず、名前は下の一覧が受け持つ。
+ *
+ * ## 段の `draw` では左から帯が伸びる (cdl#715)
+ *
+ * 帯は左から右へ割合で区切る図なので、伸びる向きは並びそのもの。 棒グラフと起点を揃えている。
+ * 帯が 2 本ある図では 2 本とも同時に伸びる = 上下で同じ位置を見比べる図なので、
+ * 片方だけ先に出ると比べる相手がいない時間ができる。
+ *
+ * **区画の字は区画と一緒に切り抜く**。 字は区画の上に乗っているので、切り抜かないと
+ * まだ出ていない区画の割合だけが宙に浮く。 時点の名前と下の一覧は最初から出す。
  */
 
 /** 区画に割合を描くために要る幅。 これ未満の区画は字を描かない */
@@ -39,10 +49,16 @@ export function ChartStackedBarNode({
   node,
   active,
   stateValues = {},
+  drawing = false,
+  progress = 1,
 }: {
   node: LaidNode;
   active: boolean;
   stateValues?: Record<string, string>;
+  /** この phase の `draw` に載っているか (cdl#715) */
+  drawing?: boolean;
+  /** phase の進み (0→1)。 `drawing` が true の時だけ読む */
+  progress?: number;
 }): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -67,6 +83,11 @@ export function ChartStackedBarNode({
   const 全体の高さ = 帯たち.length * 帯の高さ + (帯たち.length - 1) * 帯の間 + 16 + 一覧の高さ;
   const 上端 = Math.max(PAD, (node.h - 全体の高さ) / 2);
 
+  /** 帯がどこまで伸びたか (0..1、 cdl#715)。 畳み方は `draw-progress.ts` が持つ */
+  const 伸び = 進みを畳む(drawing, progress);
+  // SVG の id は document 全体の名前空間。 node id は図の中でだけ一意なので instance id で分ける
+  const 切り抜きid = `cdl-stacked-bar-draw-${useId().replace(/[^A-Za-z0-9_-]/g, "")}`;
+
   return (
     <g transform={`translate(${x0} ${y0})`}>
       <rect
@@ -81,6 +102,23 @@ export function ChartStackedBarNode({
         strokeWidth={active ? 3 : 1.25}
       />
 
+      {drawing && (
+        <defs>
+          {/*
+            左から右へ広がる切り抜き (cdl#715)。 帯が 2 本ある図でも 1 つで足りる =
+            2 本とも同じ左端から同じ幅で伸びる。
+
+            **右へ余白を足さない** = 伸びる向きそのものなので、足すと進み 0 で区画の左端が
+            見えてしまう。 切り抜きは境界を含むため、伸び切った時に区画の右端は欠けない。
+
+            **区画の `width` は触らない** = 形から量を測る利用側が、進みの途中で別の値を読まない。
+          */}
+          <clipPath id={切り抜きid}>
+            <rect x={0} y={0} width={帯の左 + 帯の幅 * 伸び} height={node.h} />
+          </clipPath>
+        </defs>
+      )}
+
       {帯たち.map((帯, 段) => {
         const y = 上端 + 段 * (帯の高さ + 帯の間);
         let 左 = 帯の左;
@@ -100,55 +138,59 @@ export function ChartStackedBarNode({
               </text>
             )}
 
-            {帯.区画.map((s, idx) => {
-              const w = 帯の幅 * s.割合;
-              const x = 左;
-              左 += w;
-              const 色 = 印の色(s.tone, idx);
-              return (
-                <g key={`slice-${idx}`}>
-                  <rect
-                    data-cdl-role="chart-stacked-bar-slice"
-                    data-cdl-unresolved={s.unresolved ? "true" : undefined}
-                    x={x}
-                    y={y}
-                    width={Math.max(0, w)}
-                    height={帯の高さ}
-                    fill={色}
-                  />
-                  {/*
+            {(() => {
+              const 区画たち = 帯.区画.map((s, idx) => {
+                const w = 帯の幅 * s.割合;
+                const x = 左;
+                左 += w;
+                const 色 = 印の色(s.tone, idx);
+                return (
+                  <g key={`slice-${idx}`}>
+                    <rect
+                      data-cdl-role="chart-stacked-bar-slice"
+                      data-cdl-unresolved={s.unresolved ? "true" : undefined}
+                      x={x}
+                      y={y}
+                      width={Math.max(0, w)}
+                      height={帯の高さ}
+                      fill={色}
+                    />
+                    {/*
                     区画の字。 **入る時だけ描く** = 細い区画に詰めると隣へはみ出して
                     どちらの値か読めなくなる。 名前は下の一覧が受け持つ
                   */}
-                  {w >= SLICE_MIN_W_FOR_TEXT && (
-                    <text
-                      data-cdl-role="chart-stacked-bar-slice-text"
-                      x={x + w / 2}
-                      y={y + 帯の高さ / 2 + (w >= SLICE_MIN_W_FOR_VALUE ? -2 : 4)}
-                      fontSize={区画の級}
-                      fontWeight={700}
-                      textAnchor="middle"
-                      fill="#ffffff"
-                    >
-                      {割合表記(s.割合)}
-                    </text>
-                  )}
-                  {w >= SLICE_MIN_W_FOR_VALUE && (
-                    <text
-                      data-cdl-role="chart-stacked-bar-slice-value"
-                      x={x + w / 2}
-                      y={y + 帯の高さ / 2 + 13}
-                      fontSize={区画の級 - 1}
-                      textAnchor="middle"
-                      fill="#ffffff"
-                      fillOpacity={0.85}
-                    >
-                      {実値表記(s.実値)}
-                    </text>
-                  )}
-                </g>
-              );
-            })}
+                    {w >= SLICE_MIN_W_FOR_TEXT && (
+                      <text
+                        data-cdl-role="chart-stacked-bar-slice-text"
+                        x={x + w / 2}
+                        y={y + 帯の高さ / 2 + (w >= SLICE_MIN_W_FOR_VALUE ? -2 : 4)}
+                        fontSize={区画の級}
+                        fontWeight={700}
+                        textAnchor="middle"
+                        fill="#ffffff"
+                      >
+                        {割合表記(s.割合)}
+                      </text>
+                    )}
+                    {w >= SLICE_MIN_W_FOR_VALUE && (
+                      <text
+                        data-cdl-role="chart-stacked-bar-slice-value"
+                        x={x + w / 2}
+                        y={y + 帯の高さ / 2 + 13}
+                        fontSize={区画の級 - 1}
+                        textAnchor="middle"
+                        fill="#ffffff"
+                        fillOpacity={0.85}
+                      >
+                        {実値表記(s.実値)}
+                      </text>
+                    )}
+                  </g>
+                );
+              });
+              // 描く指定が無い図には包みを足さず、 従来の DOM 構造を保つ
+              return drawing ? <g clipPath={`url(#${切り抜きid})`}>{区画たち}</g> : 区画たち;
+            })()}
           </g>
         );
       })}
@@ -156,16 +198,16 @@ export function ChartStackedBarNode({
       {/* 一覧。 区画に字が入らなかった件もここで名前と色が引ける */}
       {一覧の並び(data, 帯の左, node.w - PAD, 名前の級).map(({ d, idx, x, 行 }) => {
         const y =
-          上端 + 帯たち.length * (帯の高さ + 帯の間) - 帯の間 + 16 + 一覧の高さ / 2 + 行 * 一覧の高さ;
+          上端 +
+          帯たち.length * (帯の高さ + 帯の間) -
+          帯の間 +
+          16 +
+          一覧の高さ / 2 +
+          行 * 一覧の高さ;
         return (
           <g key={`legend-${idx}`} data-cdl-role="chart-stacked-bar-legend">
             <rect x={x} y={y - 5} width={10} height={10} rx={2} fill={印の色(d.tone, idx)} />
-            <text
-              x={x + 16}
-              y={y + 4}
-              fontSize={名前の級}
-              fill="var(--cdl-text, #1a1f2a)"
-            >
+            <text x={x + 16} y={y + 4} fontSize={名前の級} fill="var(--cdl-text, #1a1f2a)">
               {d.label}
             </text>
           </g>