Skip to content
Swizec Teller - a geek with a hatswizec.com

Build an animated pure SVG dynamic height accordion with React and D3

This is a proof of concept I built for a client. They were building an event flow data visualization and weren't happy with how finicky and hard to use their components turned out.

So they asked me for help πŸ’ͺ

Goal

The goal was to have an event flow visualization where icons represent different types of events, are connected with an unbroken line, and show additional information when clicked. The additional information can contain sub-flows, further data visualization, or just text.

It’s inspired by how GitHub visualizes the PR process but is intended for richer graphics. Hence why it has to be in SVG.

GitHub shows the PR process using connected event icons with descriptions

Problems to solve / gotchas to catch

The trouble begins when you realize SVG is terrible for layout. You want SVG because it's great for dataviz –fun shapes, vector graphics, full control of element positioning. Great.

But also full control of element positioning. 😩

With great power comes great amounts of work, you see. Where HTML performs basic layouting for you, SVG does not. Want text to flow into a new line? Do it yourself. Want elements to push other elements out of the way? Do it yourself. Want anything to happen? Do it yourself.

This is great when you have all the information up front.

But it’s terrible when you can't know the size of some elements. Like the height of those dynamic blocks on the right.

My client tried several approaches and finally settled on a component structure a little like this πŸ‘‡

Almost good enough structure

Each row is a div that contains an svg on the left and a div on the right. The SVG renders our icon and the vertical line. The div contains potentially expanding descriptions.

When the inner div becomes bigger, it resizes the container div. This pushes the rows below further down.

All great πŸ‘Œ

But it's finicky, difficult to align, and you don't even wanna know what happens when someone resizes their browser and elements start breaking into new lines.

The objective, therefore, is to build a solution that:

  • is not finicky
  • has a simple API
  • works with arbitrary row heights
  • can handle rows resizing after initial render
  • allows users to render anything into this structure

The solution

Render everything inside an SVG, use foreignObject to support auto text layouting on the right, and abuse React ref callbacks to deal with dynamic height.

In a nutshell πŸ‘‡

  • <AccordionFlow> renders rows
  • <AccordionFlow> holds an array of known or default row heights, used for vertical positioning
  • <Row> gets 2 render props, icon and content
  • icon renders the left side
  • content renders the right side inside a <foreignObject>
  • a ref callback on content triggers a height update callback
  • the height update callback updates a list of heights in <AccordionFlow>
  • this triggers a re-render and each <Row> declaratively transitions itself into its new position
  • when the content updates itself, it calls a callback that tells <Row> its height has changed
  • the same reflow happens as before

Savvy? Here's how it works again

Let's look at the code :)

index.js

You can think of this as the consumer side. Whomever needs to render our AccordionFlow.

It starts by creating an array of arrays to represent our data. Each has an <Icon> and a <Content>.

// index.js prep data
const icons = [<circle>, <rectangle>, <triangle>],
flowData = d3range(10).map(i => [
icons[i % 3],
contentUpdated => (
<dynamiccontent title="{`Row" ${i}`}="" contentupdated={contentUpdated}>
{d3range(10)
.slice(0, i)
.map(() => faker.lorem.paragraph())}
</dynamiccontent>
)
]);
</triangle></rectangle></circle>

Icon is a plain component. We're rendering it as a compound component with no frills. ``is wrapped in a function because it's going to be used as a render prop. It gets the callback function it can call to dynamically update its height after initial rendering.

We need this so AccordionFlow can know when to push other rows out of the way.

Rendering our dataviz is meant to be simple πŸ‘‡

// index.js render method
<svg width="600" height="2240">
<accordionflow data={flowData}></accordionflow>
</svg>

Svg is very tall to make room for expanding. We could wrap AccordionFlow in additional callbacks and make svg height dynamic, but this is a proof of concept :)

AccordionFlow is where we render every row, the vertical line on the left, keep a list of known heights for each row, and handle vertical positioning.

Using idiomatic but not the most readable code, it comes out to 30 lines. πŸ’β€β™€οΈ

// AccordionFlow
class AccordionFlow extends React.Component {
defaultHeight = 50;
state = {
heights: this.props.data.map(_ => this.defaultHeight)
};
render() {
const { data } = this.props,
{ heights } = this.state;
return (
<g transform="translate(0, 20)">
<line x1={15} x2={15} y1={10} y2="{heights.reduce((sum," h)=""> sum + h, 0)}
stroke="lightgrey"
strokeWidth="2.5"
/>
{data.map(([icon, content], i) => (
<row icon={icon} content={content} y="{heights.slice(0," i).reduce((sum,="" h)=""> sum + h, 0)}
width={450}
key={i}
reportHeight={height => {
let tmp = [...heights];
tmp[i] =
height !== undefined && height > this.defaultHeight
? height
: this.defaultHeight;
this.setState({ heights: tmp });
}}
/>
))}
</row></line></g>
);
}
}

We start with default heights of 50 pixels, and render a grouping element <g> to help with positioning. Inside we render a vertical <line> to connect all icons, then go into a loop of rows.

Each <Row> gets

  • an icon render prop
  • a content render prop
  • vertical position y calculated as the sum of all heights so far
  • a width, which helps it figure out its height
  • a key just so React doesn't complain
  • a reportHeight callback, which updates a particular height in our heights array

We should probably move that callback into a class method, but we need to encapsulate the index. Best we could do is something like height => this.reportHeight(height, i).

The ``component is more beastly. It renders the icon and the content, handles height callbacks, and uses my declarative D3 transitions with React 16.3+ approach to animate its vertical positioning.

64 lines of code in total.

class Row extends React.Component {
state = {
open: false,
y: this.props.y,
};
toggleOpen = () => this.setState({ open: !this.state.open });
// needed for animation
rowRef = React.createRef();
// magic dynamic height detection
contentRefCallback = (element) => {
if (element) {
this.contentRef = element;
this.props.reportHeight(element.getBoundingClientRect().height);
} else {
this.props.reportHeight();
}
};
contentUpdated = () => {
this.props.reportHeight(this.contentRef.getBoundingClientRect().height);
};
componentDidUpdate() {
// handle animation
}
render() {
// render stuff
}
}

Our `component uses stateto keep track of whether it'sopenand its vertical positiony`.

We use toggleOpen to flip the open switch. Right now, that just means the difference between content being rendered or not.

The fun stuff happens in contentRefCallback. We use this as a React ref callback, which is a method that React calls when a new element is rendered into the DOM.

We use this opportunity to save the ref as a component property for future reference, get its height using getBoundingClientRect, and call the reportHeight callback to tell ``about our new height.

Something similar happens in contentUpdated. It's a callback we pass into the content render prop so it can tell us when something changes. We then re-check our new height and report it up the hierarchy.

render

The render method puts all of this together.

render() {
const { icon, content, width } = this.props,
{ y } = this.state;
return (
<g transform="{`translate(5," ${y})`}="" ref={this.rowRef}>
<g onclick={this.toggleOpen} style={{ cursor: "pointer" }}>
{icon}
</g>
{this.state.open ? (
<foreignobject x={20} y={-20} width={width} style={{ border: "1px solid red" }}>
<div ref={this.contentRefCallback}>
{typeof content === "function"
? content(this.contentUpdated)
: content}
</div>
</foreignobject>
) : null}
</g>
);
}

We start with a grouping element `that handles positioning and sets the rowRef`.

Inside, we render first a grouping element with a click callback and our icon. This lets us open and close a row.

Followed by a conditional rendering of a foreignObject that contains our content. Foreign objects are SVG elements that let you render just about anything. HTML, more SVG, .... HTML. Mostly HTML, that's the magic.

This foreignObject has an x,y position to compensate for some funniness, and a width that helps your browser's layouting engine decide what to do.

It then contains a div so we can attach our contentRefCallback because putting it on foreignObject always reported height as 0. I don't know why.

We then render our content as either a functional render prop being passed the contentUpdated callback, or a simple component.

componentDidUpdate

componentDidUpdate declaratively handles the vertical transitioning of every row's vertical position. You should read my Declarative D3 transitions with React 16.3 article for details.

componentDidUpdate() {
const { y } = this.props;
d3
.select(this.rowRef.current)
.transition()
.duration(500)
.ease(d3.easeCubicInOut)
.attr("transform", `translate(5, ${y})`)
.on("end", () => {
this.setState({
y
});
});
}

The idea is that we take the new y prop, transition our DOM node directly using D3, then update our state to keep React in sync with reality.

To be honest, <DynamicContent> isn't the fun part of this code. I include it here for completeness.

It's a component that renders a title and some paragraphs, waits 1.2 seconds, then adds another paragraph. There's also a spinner to make things more interesting.

lass DynamicContent extends React.Component {
state = {
paragraphs: this.props.children,
spinner: true
};
componentDidMount() {
setTimeout(() => {
this.setState({
paragraphs: [...this.state.paragraphs, faker.lorem.paragraph()],
spinner: false
});
this.props.contentUpdated();
}, 1200);
}
render() {
const { title } = this.props,
{ paragraphs, spinner } = this.state;
return (
<react class="fragment">
<h3>{title}</h3>
{paragraphs.map(c => {c}
)}
<p>
{spinner && (
<spinner name="cube-grid" color="green" fadein="none" style={{ margin: "0 auto" }}>
)}
);
}
}
</spinner></p></react>

See, state holds paragraphs and a spinner flag. componentDidMount has a timeout of 1.2 seconds, then adds another paragraph and calls the contentUpdated callback.

The render method returns a React.Fragment containing an h3 with the title, a bunch of paragraphs, and an optional Spinner from react-spinkit.

Nothing special, but the dynamic stuff could wreak havoc with our AccordionFlow without that callback.

Happy hacking πŸ€“

Should I open source this?

What do you think, should I open source this? Would anyone find it useful? Ping me on Twitter or Reddit since I'm prob posting this to Reddit πŸ˜›

Did you enjoy this article?

Published on June 1st, 2018 in Front End, Technical

Learned something new?
Want to become a high value JavaScript expert?

Here's how it works πŸ‘‡

Leave your email and I'll send you an Interactive Modern JavaScript Cheatsheet πŸ“–right away. After that you'll get thoughtfully written emails every week about React, JavaScript, and your career. Lessons learned over my 20 years in the industry working with companies ranging from tiny startups to Fortune5 behemoths.

Start with an interactive cheatsheet πŸ“–

Then get thoughtful letters πŸ’Œ on mindsets, tactics, and technical skills for your career.

"Man, love your simple writing! Yours is the only email I open from marketers and only blog that I give a fuck to read & scroll till the end. And wow always take away lessons with me. Inspiring! And very relatable. πŸ‘Œ"

~ Ashish Kumar

Join over 10,000 engineers just like you already improving their careers with my letters, workshops, courses, and talks. ✌️

Have a burning question that you think I can answer?Β I don't have all of the answers, but I have some! Hit me up on twitter or book a 30min ama for in-depth help.

Ready to Stop copy pasting D3 examples and create data visualizations of your own? Β Learn how to build scalable dataviz components your whole team can understand with React for Data Visualization

Curious about Serverless and the modern backend? Check out Serverless Handbook, modern backend for the frontend engineer.

Ready to learn how it all fits together and build a modern webapp from scratch? Learn how to launch a webapp and make your first πŸ’° on the side with ServerlessReact.Dev

Want to brush up on your modern JavaScript syntax?Β Check out my interactive cheatsheet: es6cheatsheet.com

By the way, just in case no one has told you it yet today: I love and appreciate you for who you are ❀️