Add possibility to include a data attribute to text element.

src/marks/text.d.ts

@@ -151,6 +151,13 @@ export interface TextOptions extends MarkOptions, TextStyles {
    * interpreted as a channel.
    */
   rotate?: ChannelValue;
+
+  /**
+   * Add a data attribute to the text node, which could be used for targeting with CSS.
+   * If a string is provided the data attribute key will be "data-text",
+   * for more control provide an array with the attribute name and value, e.g. ["data-name", "my-text"].
+   */
+  dataAttr?: string | [`data-${string}`, string];
 }
 
 /** Options for the textX mark. */

src/marks/text.js

@@ -56,7 +56,8 @@ export class Text extends Mark {
       fontStyle,
       fontVariant,
       fontWeight,
-      rotate
+      rotate,
+      dataAttr
     } = options;
     const [vrotate, crotate] = maybeNumberChannel(rotate, 0);
     const [vfontSize, cfontSize] = maybeFontSizeChannel(fontSize);
@@ -88,11 +89,13 @@ export class Text extends Mark {
     if (!(this.lineWidth >= 0)) throw new Error(`invalid lineWidth: ${lineWidth}`);
     this.splitLines = splitter(this);
     this.clipLine = clipper(this);
+    this.dataAttr = dataAttr;
   }
   render(index, scales, channels, dimensions, context) {
     const {x, y} = scales;
     const {x: X, y: Y, rotate: R, text: T, title: TL, fontSize: FS} = channels;
     const {rotate} = this;
+    const [dataAttrKey, dataAttrValue] = Array.isArray(this.dataAttr) ? this.dataAttr : ["data-text", this.dataAttr];
     const [cx, cy] = applyFrameAnchor(this, dimensions);
     return create("svg:g", context)
       .call(applyIndirectStyles, this, dimensions, context)
@@ -114,6 +117,7 @@ export class Text extends Mark {
           )
           .call(applyAttr, "font-size", FS && ((i) => FS[i]))
           .call(applyChannelStyles, this, channels)
+          .call(applyAttr, dataAttrKey, dataAttrValue)
       )
       .node();
   }