• fix(tree): ensures pan/zoom can bind to multiple Tree instances (#100, thank you @tinaClin)

What's new in v2

This list is intended as an overview of important breaking changes that were introduced with v2.0.0.

For a list of all changes compared to v1, please see the changelog.

General

• Bumped React peer dependency: new minimum is [email protected], supports [email protected].
• Removed d3 as peer dependency: the specific D3 modules that are necessary for react-d3-tree to function (d3-hierarchy, d3-selection, d3-shape, d3-zoom) have instead been included as direct dependencies. This means:
  • Using react-d3-tree does no longer require any version of d3 to be present as a peer dependency.
  • Mitigates an issue where multiple versions of D3 may conflict with each other (#125).
• Typescript-first: all internal components (except unit tests) have been refactored to Typescript.
• Transpiled code in the package is no longer minified by default (thankfully!). This means:
  • More useful stack traces.
  • Easier debugging.
• Simpler demo integration: the demo/playground app now lives inside the repo's demo directory. The separate react-d3-tree-demo repo will be archived.
• Removed reliance on *.css files: react-d3-tree no longer uses any CSS files internally for styling.
  • Importing CSS files globally (i.e. import "./styles.css") can cause resolution issues with some libraries/frameworks (e.g. Next.js).
• Renamed internal CSS classNames for clarity and consistency.
  • If you were relying on react-d3-tree's internal classNames, please ensure you update references in your own CSS (e.g. .linkBase -> .rd3t-link).
  • The full list of internally used CSS classNames can be found here.

API

• Removed treeUtils export.
  • treeUtils has been removed to avoid redundant complexity, abstraction and bloat in the library's package.
  • If needed for your use case, the functionality treeUtils provided can be achieved by leveraging some additional D3 modules, such as d3.csvParse + d3.stratify.
• Moved animations behind enableLegacyTransitions prop. Animations are now disabled by default.
  • This has been done due to react-d3-tree still requiring react-transition-group@1 internally.
  • I spent a lot of time trying to get newer major versions of react-transition-group (and a couple of other libraries) to play nice with D3's imperative approach - without success - at which point I decided to move ahead with other pressing issues for v2.
  • It is recommended to avoid the enableLegacyTransitions flag if possible, as animations can be slow in large trees and you may see compatibility warnings in your console due to react-transition-group@1 relying on React lifecycle methods that will be deprecated in React 18.x.
• Tweaked node event handler naming to be clearer and more consistent (e.g. onClick → onNodeClick).
• Removed deprecated circleRadius prop.
• Removed textLayout prop.
  • Responsive text layouts can now be achieved via the new renderCustomNodeElement prop.
  • As a starting point, feel free to check out the demo's PureSvgNodeElement example
• Removed styles prop. Styling nodes & links is now best handled via:
  • the new className props:
    • svgClassName
    • pathClassFunc
    • rootNodeClassName
    • branchNodeClassName
    • leafNodeClassName
  • the new renderCustomNodeElement prop.
• Removed useCollapseData prop.
  • Reason: one of the key focuses for v2 was to move away from mixing concerns (raw input data and styling/tree state) inside data.
• Consolidated the RawNodeDatum interface (i.e. the expected shape of nodes in data):
  • Merged distinct data._children and data.children into single
    data.children key.
  • Created data.__rd3t key to separate rd3t-specific data points from user input data:
    • data._collapsed -> data.__rd3t.collapsed
    • data._depth -> data.__rd3t.depth
    • data.id -> data.__rd3t.id

• Fixes an issue where a subtree would fully expand onClick after initialising tree depth to initialDepth.

• Implements svgClassName and pathClassFunc props (#323, thank you @deshaser, h/t @aydnep).
• Fixes initialDepth not being re-applied when data changes (#47).

• Adds missing "step" enum for Tree PropTypes/Typescript definitions

• adds "step" pathFunc for stairlike links rendering (#250, thank you @martyns0n)

• Fixes unaddressed case for missing re-render when props.data and props.translate update simultaneously (#242, thank you @bhgsbatista)

• Fixes missing re-renders when props.translate changes (#240, #241; thank you @bhgsbatista, @ftirej)

• Fixes accidental regression in React 15 compatibility (#237, thanks for reporting @bhgsbatista)

• Adds data-source-id & data-target-id on Link (#234, thank you @lazToum)

• fix(ts): fixes incorrect typing for onUpdate callback (#231)

• fix(ts): adds missing typings for new linkHandlers, fixes exports

• Adds Link Actions (click,mouseover,mouseout); #230, thank you @lazToum

• Allows overriding of textLayout for individual nodes (#211, thank you @shuson)

• Makes Node.name propType optional (#183, thank you @Robert-Fish & @vprefournier)

• Removes redundant ComponentState: any declaration from Tree (#188, thank you @Sandip2110)

• Adds Typescript declarations for module's public API (thank you @DavidBabel).

• Fixes issue with non-persistent events (#168, thank you @mwilde345)

• Implements useCollapseData prop (#114, thank you @amancegc)
• Allows passing the root node object to props.data directly, without a need for a wrapper array (#145)

• Adds shouldCollapseNeighborNodes prop (#46) ✨