Data visualisation and application technologies have evolved greatly over the past decade. Two of the most popular web-based technologies for this are D3.js and React.js and both began as separate projects in 2011. Now, after nearly 10 years, there is finally an elegant way to have these two technologies work together to deliver both an exciting data visualisation experience and sustainable development workflow.

在过去的十年中，数据可视化和应用技术得到了巨大的发展。 两种最流行的基于Web的技术是D3.js和React.js，它们都在2011年作为单独的项目开始。如今，在将近10年之后，终于有了一种优雅的方式来使这两种技术协同工作以交付令人兴奋的数据可视化体验和可持续发展工作流程。

D3 is an excellent library for rendering data visualisation — this should be preserved by separating D3 implementation from React.

D3是用于呈现数据可视化的优秀库-应该通过将D3实现与React分开来保留它。

Understanding this workflow is important for developers, designers and anyone involved with the process of creating data visualisations as it can help improve the experience and reduce the effort to create it. Having two workflows might seem contradictory to this second point and throughout this piece I will attempt to illustrate why this is not the case.

对于开发人员，设计人员以及参与数据可视化过程的任何人来说，了解此工作流程都很重要，因为它可以帮助改善体验并减少创建数据的工作量。 拥有两个工作流程似乎与第二点矛盾，在整篇文章中，我将尝试说明为什么情况并非如此。

D3和React之间的根本区别 (The fundamental difference between D3 and React)

Both D3 and React provide their own DOM Manipulation API – adding, updating and deleting HTML. D3 offers life cycle events to match the DOM change operation (enter, update and exit) with method chaining syntax that is designed to directly alter the HTML elements. Whereby React provides an entirely different concept of a Virtual DOM with JSX syntax and React controls how this translates to the real HTML elements.

D3和React都提供了自己的DOM操作API-添加，更新和删除HTML。 D3提供了生命周期事件，以使用旨在直接更改HTML元素的方法链接语法来匹配DOM更改操作(输入，更新和退出)。 因此，React用JSX语法提供了一个完全不同的虚拟DOM概念，而React控制着它如何转换为真实HTML元素。

React和视觉设计的演变使您相信一切都应该是一个React组件 (React and visual design evolution leads you to believe everything should be a React component)

The powerful layer of abstraction from React provides an excellent development workflow such that parts of the page can be separated into individual components. This workflow also matches how web design has evolved from static full page designs into component based style guides – and more recently design systems. React has proved to be so useful at describing these modularised systems that the immediate reaction from developers was to bring other technologies such as D3 and abstract them into React components.

React强大的抽象层提供了出色的开发工作流程，因此页面的各个部分可以分为单独的组件。 此工作流还与Web设计如何从静态的整页设计演变为基于组件的样式指南以及最新的设计系统相匹配。 事实证明，React在描述这些模块化系统方面非常有用，以至于开发人员的立即React就是将其他技术(例如D3)引入到React组件中。

One approach would be using React to handle the DOM and styling and using D3 to only handle the math. This approach is what the evolution of React and visual design systems would lead us to believe is the most appropriate solution. However, it is not the case even though as of writing it is still quite a popular approach and many libraries use it today including the popular Recharts library. As these libraries will attest there are many benefits to writing all the DOM markup in JSX — such as being able to separate the parts of a data visualisation graphic as you would any other element on the page.

一种方法是使用React处理DOM和样式，并使用D3仅处理数学。 这种方法正是React和视觉设计系统的发展将使我们相信这是最合适的解决方案。 但是，事实并非如此，尽管在编写之时它仍然是一种非常流行的方法，并且今天许多图书馆都在使用它，包括流行的Recharts库。 正如这些库所证明的那样，用JSX编写所有DOM标记有很多好处-例如，能够像页面上的任何其他元素一样分离数据可视化图形的各个部分。

When pausing for a moment, this approach doesn’t actually align to how data visualisations are created — a visualisation cannot always be broken down into smaller parts as each part relates to each other much more closely than the other parts of a web page. There are also some significant downsides that involve needing to reimplement complex concepts in D3 such as data updates, transitions and animations. Another issue is that writing in JSX requires translating examples and references for D3 from an entirely different language — as most D3 examples are surprisingly described in the D3 method chaining syntax style and directly reference D3 APIs. All of this is to say that this approach is not respecting the fundamental difference between the two technologies.

暂停片刻后，此方法实际上与数据可视化的创建方式不符-可视化不能总是分解成较小的部分，因为每个部分之间的相互关系比网页的其他部分紧密得多。 还有一些重大的缺点，涉及需要在D3中重新实现复杂的概念，例如数据更新，过渡和动画。 另一个问题是，用JSX编写代码需要从完全不同的语言翻译D3的示例和引用-因为大多数D3示例都以D3方法链语法样式直接描述了D3 API。 所有这些都是说这种方法没有尊重两种技术之间的根本区别。

如何将D3实现与React分开 (How to separate D3 implementation from React)

Another approach to working with D3 is to only render a root node in React and use D3 to control the visualisation with its own DOM Manipulation API. Data and events will still need to be transmitted between React and D3 and this can be achieved concisely with React Hooks.

使用D3的另一种方法是仅在React中渲染一个根节点，并使用D3通过其自己的DOM Manipulation API控制可视化。 仍然需要在React和D3之间传输数据和事件，这可以通过React Hooks简洁地实现。

The immediate benefits of this approach include each technology having a single responsibility, reference material for D3 is the same as the project code and any data visualisation presentation is possible with minimal code. This approach also makes the code more sustainable as D3 is decoupled from React and the two technologies are free to evolve independently with the effort to adopt new features from either very minimal on the project.

这种方法的直接好处是，每种技术都负有单一责任，D3的参考资料与项目代码相同，并且只需最少的代码就可以进行任何数据可视化演示。 当D3与React分离时，这种方法还使代码更具可持续性，并且两种技术可以自由地独立发展，并努力从项目中的任何一个最小的方面采用新功能。

When adopting this approach it’s important to understand D3 elements can’t be separated in components in the same way they can in React. This is a side-effect of how the D3 lifecycle is designed, where richer experiences are built by describing together all the elements bound to the data. Each visualisation should be treated as a closed system. If React components are Lego bricks then D3 visualisations wrapped in React are light bricks.

当采用这种方法时，重要的是要了解D3元素不能像在React中一样被分离在组件中。 这是D3生命周期设计方式的副作用，在D3生命周期中，通过一起描述绑定到数据的所有元素来构建更丰富的体验。 每种可视化都应视为封闭系统。 如果React组件是乐高积木，那么包裹在React中的D3可视化效果就是轻质砖。

结论 (Conclusion)

As with all things in software development we should always strive to design systems and write code in a way that can adopt change as efficiently as possible. React and D3 have both evolved with each technology delivering excellent frameworks for their respective purposes. Projects will be able to adopt new features in each technology by respecting these frameworks with the independence they deserve.

与软件开发中的所有事物一样，我们应始终努力设计系统并编写代码，以尽可能有效地采用变更。 React和D3都随着每种技术的发展而发展，它们为各自的目的提供了出色的框架。 通过尊重这些框架应具有的独立性，项目将能够在每种技术中采用新功能。

进一步阅读 (Further reading)

If you’re just starting out with D3 then I highly recommend Adam Janes on the David Walsh blog: 5 Crucial Concepts for Learning d3.js and How to Understand Them

如果您只是从D3开始，那么我强烈推荐David Walsh博客上的Adam Janes：学习d3.js和如何理解它们的5个关键概念。

Karol Stopya has a practical guide to separating D3 from React: https://link.medium.com/a9cjWGWhT9

Karol Stopya拥有从React分离D3的实用指南： https ：//link.medium.com/a9cjWGWhT9

This snippet by Alex Johnson does well to cover the pros and cons for different approaches to D3 and React: Working with React and D3 together · GitHub

Alex Johnson的这段代码很好地介绍了D3和React不同方法的优缺点：一起使用React和D3·GitHub