d3.js selection.data and Browser DOM: bound datum visibility across the integration boundary

p>In D3.js, the selection.data() method attaches datums to DOM elements via the __data__ property. Because this property exists directly on the DOM object, it is publicly readable through any JavaScript execution or browser developer tools. There is no built-in privacy control within D3 to make this reference private once it has been bound.

Lifecycle and Garbage Collection

D3 does not guarantee the clearing of the __data__ reference on detached nodes after an exit selection. When an element is removed via .remove(), the reference to the datum persists on the node until the node itself is garbage collected. If the node is cached in a variable or remains in a detached fragment, the sensitive data may linger in memory indefinitely.

Interoperability Patterns for Sensitive Data

To prevent exposing sensitive data through the DOM boundary while maintaining joins, transitions, and event handling, consider the following patterns:

• Manual Clearing: Explicitly nullify the data reference during the exit selection.

  selection.exit().each(function(d) {
    d3.select(this, null);
  }).remove();

• External State Mapping: Instead of binding the full sensitive object, bind only a non-sensitive unique identifier (ID). Use this ID to look up data in a private WeakMap or a closure-based store during event handlers or transitions.
• Proxy Objects: Bind a shallow proxy object that contains only the properties required for visualization (e.g., coordinates, labels) while keeping sensitive fields in a separate, unbound structure.

The primary trade-off is between the convenience of D3's declarative data binding and the requirement for data encapsulation. If the data is truly sensitive, the WeakMap approach is the most robust defense against accidental exposure.