Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Responsive D3 The React Way
Search
John Bartos
March 16, 2016
Programming
0
210
Responsive D3 The React Way
Use higher-order components to abstract the nastiness of interacting with the real DOM
John Bartos
March 16, 2016
Tweet
Share
Other Decks in Programming
See All in Programming
ReadMoreTextView
fornewid
1
480
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
890
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
310
C++20 射影変換
faithandbrave
0
530
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
GoのGenericsによるslice操作との付き合い方
syumai
3
690
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
800
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
230
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
190
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
430
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
4 Signs Your Business is Dying
shpigford
184
22k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Fireside Chat
paigeccino
37
3.5k
Code Reviewing Like a Champion
maltzj
524
40k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Six Lessons from altMBA
skipperchong
28
3.8k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Transcript
Making D3 Responsive The React Way https://johnbartos.github.io/react-d3-demo/ johnbartos.io
I'm John Bartos, and this is my first talk ever
You want to make sweet D3 visualizations that just work™
on all screen sizes (you also care about doing it properly)
But there's a problem...
D3 needs to know its size before runtime You don't
know size until runtime
Fortunately, there's an easy solution
ReactDOM.findDOMNode() GetBoundingClientRect() window.addEventListener('resize', ..) this.setState()
But there are two (2) things wrong with this approach!
findDOMNode() breaks component abstraction
A stateless component is now stateful
You need a higher-order component! (?)
HOCs are functions which take a component and returns another
component that wraps it (thats it)
Our HOC gets size exactly as before and passes it
as props to its child When 'resize' event fires, new props are passed, prompting a rerender
The HOC encapsulates all the nastiness
The wrapped component just gets props
There's a small catch – children render before parents Need
to set initial state in HOC
(Please clap)