[Feature Request] Ability to add custom data to rendered objects

[tstsrt]

What is the feature ?

When objects, such as datapoints, axes, gridlines, legends, labels, etc. are rendered with some backends such as SVG, it would be useful if custom data can be added to these elements. For example, SVG elements can have custom data-* attributes. This is useful to target individual rendered elements with other libraries for interactivity, animation, etc. For example:

<!--Current-->
<circle cx="100" cy="100" r="2" opacity="1" fill="#FF0000"/>
<!--Proposed-->
<circle cx="100" cy="100" r="2" opacity="1" fill="#FF0000" data-id="12345" data-comment="A red circle"/>

Why this feature is useful and how people would use the feature ?

For SVG specifically, custom data can be used by javascript to add interactivity to elements(c.f. #13), for animation, etc. This may also be useful for other backends which retain some structural information.

Additional Information

Inspired by this matplotlib example for making interactive plots.

[mainrs]

Maybe this could be tackled together with adding a general support for some form of metadata for drawn elements? In the example of SVG it might also be favorable to provide a way to set the CSS classname for that specific element, allowing the consumer of the diagram to ultimately decide the color scheme of the diagram.

I am not entirely sure how this should be designed correctly as the API surface has no knowledge about the renderer. Maybe a simple key-value approach might work?

Does this kind of functionality make sense for other backends as well or is this only a SVG backend specific need?

[tstsrt]

Yeah, it's sufficient to be able to set a single value like id for SVG elements. Further data can be added with other SVG processing libraries.

For now, I think only the SVG backend makes sense. However, if interactive backends are implemented in future, this will be quite useful for them as well.

[curioussavage]

I may want something like this for a different backend too