v3.1.0

• feat: provide HierarchyPointNode for renderCustomNodeElement (#355, h/t @Joroze)

v3.0.0

• refactor: aligns onNode handler parameter signatures with onLink handlers (#349)
  • BREAKING CHANGE: All top-level onNode handlers now pass node: HierarchyPointNode<TreeNodeDatum> as their first parameter instead of previous node: TreeNodeDatum.
  • This change affects the following event handlers: onNodeClick, onNodeMouseOver, onNodeMouseOut.
  • If you're currently using v2.x, you can preserve your existing handler behaviour in v3.x by simply accessing the data property on the passed node:
    • v2: onNodeClick={ (node, event) => { console.log(node) } }
    • v3: onNodeClick={ (node, event) => { console.log(node.data) } }
  • The change aligns Node handlers with those of Link, which already return HierarchyPointNode<TreeNodeDatum> for their sourceNode and targetNode parameters.
  • See the updated type definition for TreeNodeEventCallback for more details.

v2.0.4

• fix(zoomable): allows for dragging without scaling if props.zoomable is set to false.
• fix(ts): widens type for RawNodeDatum["attributes"] (#350)
  • attributes was made unintentionally restrictive during the v2 refactor to Typescript, by moving from a loose implicit object type to Record<string,string>.
  • This change widens the used Record type to additionally accept number and boolean primitives as possible values.
  • See the RawNodeDatum docs for more details.

v2.0.2

• Fixes npm install failing on npm@7 without additional flags due to a peer dependency mismatch (#347)

v2.0.1

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

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

v1.17.1

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

v1.17.0

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

v1.16.1

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

v1.16.0

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