React component to create interactive D3 tree graphs
MIT License
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.
[email protected]
, supports [email protected]
.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:
react-d3-tree
does no longer require any version of d3
to be present as a peer dependency.demo
directory. The separate react-d3-tree-demo
repo will be archived.*.css
files: react-d3-tree
no longer uses any CSS files internally for styling.
import "./styles.css"
) can cause resolution issues with some libraries/frameworks (e.g. Next.js).react-d3-tree
's internal classNames, please ensure you update references in your own CSS (e.g. .linkBase -> .rd3t-link
).treeUtils
export.
treeUtils
has been removed to avoid redundant complexity, abstraction and bloat in the library's package.treeUtils
provided can be achieved by leveraging some additional D3 modules, such as d3.csvParse + d3.stratify.enableLegacyTransitions
prop. Animations are now disabled by default.
react-d3-tree
still requiring react-transition-group@1
internally.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.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.onClick → onNodeClick
).circleRadius
prop.textLayout
prop.
renderCustomNodeElement
prop.PureSvgNodeElement
example
styles
prop. Styling nodes & links is now best handled via:
className
props:
svgClassName
pathClassFunc
rootNodeClassName
branchNodeClassName
leafNodeClassName
renderCustomNodeElement
prop.useCollapseData
prop.
data
.RawNodeDatum
interface (i.e. the expected shape of nodes in data
):
data._children
and data.children
into singledata.children
key.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