TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

React and D3.js

335 点作者 mxschumacher大约 4 年前

16 条评论

tptacek大约 4 年前
This feels a lot like rewriting a big chunk of D3 in React, for purity&#x27;s sake. Maybe there&#x27;s something to that, but the code is comparably long in both cases, and if I have to load a bunch of concepts into my brain&#x27;s resident set, I wonder if I wouldn&#x27;t prefer those concepts to be D3&#x27;s, which work in a bunch of different places, and not an idiosyncratic set of React components, which only work in a small set of codebases.<p>So for me, I feel like I got most of the answer from: get a ref from useRef, and use a useEffect to watch a data set and map the data to the ref using D3 itself.
评论 #26631951 未加载
评论 #26630246 未加载
评论 #26631653 未加载
dimmke大约 4 年前
Visx basically solves this problem: <a href="https:&#x2F;&#x2F;airbnb.io&#x2F;visx&#x2F;" rel="nofollow">https:&#x2F;&#x2F;airbnb.io&#x2F;visx&#x2F;</a>
评论 #26633112 未加载
评论 #26632357 未加载
cube2222大约 4 年前
After regularly reading about D3 I&#x27;ve recently got the occasion to use it at my employer[0] to visualize users&#x27; infra resources, and it&#x27;s been such a pleasure!<p>Here&#x27;s a small demo if anyone&#x27;s interested: <a href="https:&#x2F;&#x2F;youtu.be&#x2F;N9haFA_MwdM" rel="nofollow">https:&#x2F;&#x2F;youtu.be&#x2F;N9haFA_MwdM</a><p>The simplicity of the declarative approach, where you just specify the desired state, and it will animate everything is really great to work with.<p>If anyone would like to play around with it, I recommend this tutorial series on observablehq very much: <a href="https:&#x2F;&#x2F;observablehq.com&#x2F;collection&#x2F;@sxywu&#x2F;introduction-to-d3-js" rel="nofollow">https:&#x2F;&#x2F;observablehq.com&#x2F;collection&#x2F;@sxywu&#x2F;introduction-to-d...</a><p>Had lots of fun going through it.<p>[0]:<a href="https:&#x2F;&#x2F;spacelift.io" rel="nofollow">https:&#x2F;&#x2F;spacelift.io</a>
locallost大约 4 年前
I started working on a Vue project that needed to add a couple visualizations, and initially I didn&#x27;t overcomplicate, and did it just with d3 and &quot;DOM manipulation&quot;. Later on I also tried this approach because it&#x27;s what Vue expects and otherwise has quirks if you don&#x27;t use its templating, but in the end stayed with d3 because some things seemed just really simpler (e.g. transitions). The complexity doesn&#x27;t really change if you go from .append(&#x27;circle&#x27;).attr(&#x27;r&#x27;...) to &lt;circle r=&quot;... &#x2F;&gt;. It&#x27;s definitely from a previous era, and feels a bit dated, but this also has its advantages. For example, SVGs don&#x27;t have z-index, and so it&#x27;s done by the order of the children nodes. With a template you would have to copy a large chunk of code and paste it somewhere else if you want to change the order, but with d3 it could be a one line change (e.g. take this .append(&#x27;g&#x27;) and move it below that .append(&#x27;g&#x27;)).<p>But either way, the real value in d3 are all the layouting functions, where you dump in your data, and it gives you a path to draw. How you then draw this data is really less important.
评论 #26633123 未加载
superfamicom大约 4 年前
One of the best explanations and examples of mixing React and D3 I have ever seen, not to mention the presentation is beautiful and well thought out.
villasv大约 4 年前
Instead of baking your own glue, my personal recommendation is to use Semiotic by Elijah Meeks.
评论 #26630555 未加载
评论 #26630273 未加载
purplecats大约 4 年前
I really want to learn D3, and I&#x27;ve tried to learn it once before, but I just can&#x27;t make it click in my head. I can find something and modify it to fit my needs, but I can&#x27;t get the paradigm of it.<p>This is such a beautifully and well written article and it&#x27;s probably as close as I&#x27;ll get to a digestible tutorial on it, so idk why I&#x27;m having such a tough time. I am very proficient at React and have been told multiple times that I&#x27;m a top performer at FAANG so idk what&#x27;s so hard about D3.
评论 #26633329 未加载
评论 #26631490 未加载
评论 #26631394 未加载
评论 #26630774 未加载
zappo2938大约 4 年前
I can&#x27;t imagine d3 being performant with dynamic data input when all the d3 code inside the useEffect() is rerun over and over again. Also, how do you handle the data flow with events such as tracking mouse movements and sharing that event data between d3 and react?<p>I wonder if is better to have the d3 function inside of useCallback() and pass data as a parameter where the function isn&#x27;t re evaluated rather than in useEffect where the function is run from the top again?
评论 #26631882 未加载
评论 #26631888 未加载
dvt大约 4 年前
I absolutely <i>despise</i> writing any kind of GUI&#x2F;graphics&#x2F;layout code in React&#x27;s clunky long-form declarative style, but for whatever reason it&#x27;s really starting to take off. I guess it&#x27;s a sign of the times: there are developers these days that have quite literally <i>grown up</i> on React. It&#x27;s starting to feel like XML (used everywhere, even when it might not make much sense).<p>But to me, the code is longer, more unwieldly, more prone to error, and to top it off, it also inherits all of React&#x27;s annoying idiosyncrasies. It&#x27;s weird to even type this out, but Java&#x27;s Swing felt more intuitive than seeing D3 on top of React.<p>For example:<p><pre><code> &lt;circle cx=&quot;150&quot; cy=&quot;77&quot; r=&quot;40&quot; &#x2F;&gt; </code></pre> Just the fact that this could technically be written as draw.circle(150, 77, 40) in any sane programming language should give you some pause.
评论 #26631058 未加载
评论 #26630480 未加载
评论 #26631336 未加载
评论 #26630910 未加载
评论 #26630775 未加载
评论 #26630745 未加载
评论 #26632606 未加载
评论 #26631025 未加载
评论 #26634312 未加载
评论 #26630756 未加载
darepublic大约 4 年前
From the article:<p>&gt; Animating elements out is not very straightforward in React, so let&#x27;s keep all of the &lt;circle&gt;s rendered, and give them an opacity if they&#x27;re not in the currently shown circles.<p>...Which is the crux of the problem I always run into trying to do complicated animations in React
评论 #26632405 未加载
revskill大约 4 年前
The article code examples lack of import statements. What&#x27;s useSpring ?
评论 #26629665 未加载
zz865大约 4 年前
Its worth checking learn D3 on the observable site <a href="https:&#x2F;&#x2F;observablehq.com&#x2F;@d3&#x2F;learn-d3" rel="nofollow">https:&#x2F;&#x2F;observablehq.com&#x2F;@d3&#x2F;learn-d3</a>.<p>We talked about it here, with mbostock too <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=22675551" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=22675551</a>
wly_cdgr大约 4 年前
I don&#x27;t understand why people use D3 over something sane and simple like Pixi
评论 #26632034 未加载
hahahahe大约 4 年前
The entire site is an absolute delight. Very nicely done.
评论 #26630307 未加载
评论 #26632642 未加载
fermienrico大约 4 年前
We need to show some restraint towards extremely bright fully saturated colors, especially for text. Observe contrast and don&#x27;t just go around cranking up the saturation slider. It&#x27;s the HDR of website design, stop doing this please.
batterylow大约 4 年前
I enjoyed the presentation on that page - and D3.js is great.<p>For anyone interested, here&#x27;s an early access and practical book on visualisation with D3.js <a href="https:&#x2F;&#x2F;datacrayon.com&#x2F;shop&#x2F;product&#x2F;visualisation-with-d3&#x2F;" rel="nofollow">https:&#x2F;&#x2F;datacrayon.com&#x2F;shop&#x2F;product&#x2F;visualisation-with-d3&#x2F;</a>