v2.0.0

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