草庐IT

javascript - 在 React 应用程序中使用 D3 渲染元素的价格？

coder 2024-05-12 原文

我正在尝试了解如何集成 D3 和 React。具体来说，我试图了解使用 D3 渲染可视化效果如何影响 React。如 this excellent question and it's reply 中所述:

[...] there is currently no great way to work with React and D3 [...] this is because in the React world you don't do direct DOM manipulation, but in the d3 world that's the only thing you do.

回复继续说

It seems to me that the current consensus for Force Layouts and the like is to simply drop out of React for those components and let d3 do its thing. This isn't ideal but it's way more performant.

让 D3 负责渲染对 React 有什么影响？它只会影响使用 D3 或其他组件的组件的性能吗？例如，是否会以某种方式使用 React 的虚拟 DOM 使用 D3 螺钉直接操作 DOM？我基本上是想了解使用 D3 必须支付的价格。

最佳答案

我参与了一个项目(不幸的是私有(private)的)，我在其中使用 D3 来表示 UML 编辑器。一切都使用 SVG 操作来绘制表示 UML 的 SVG。

编辑器 UI 逻辑是在独特的 React 元素 (UMLEditor) 中使用 TypeScript 和 D3 实现的。您可以传递编辑器属性以设置 UML 中的更改，并传递回调以取回数据。例如，您可以拖放一个 UML 类(以 60fps 的速度)，但 UI 仅触发两个事件(拖放)到 React 回调。

关键是将逻辑和事件从 UI 操作中分离出来，并且有少量的大 react 元素，而不是那么多小元素。

它可以以 30fps 的速度管理包含大约 4K 类的 UML。

编辑:让我们定义一个小应用程序。 您有小 React 组件及其子元素，例如根 App 元素、导航栏、视口(viewport)等...

除 UMLEditor 之外的每个元素都对性能有很小的影响。 UMLEditor 元素是一个没有任何 React 子元素的复杂元素。其中的每个 UI 元素都是使用 D3 呈现的。 UMLEditor 的真实 DOM 包含一个完全使用 D3 管理的复杂 SVG 元素。

为了让这个元素与 React 交互，我们作为属性传递回调事件，比如拖放、创建新的 UML 类......和一个 JavaScript 类，包含所有 D3 渲染逻辑.

我们不将整个 UML 配置作为 prop 传递，因为它会对性能产生负面影响。相反，当我们出于导出目的需要它时，作为 prop 传递的 JavaScript 类可以使用方法提供整个 UML 配置。

关于javascript - 在 React 应用程序中使用 D3 渲染元素的价格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45200895/

javascriptReactstrongsectionperformancereactjsd3.jsdata-visualization

有关javascript - 在 React 应用程序中使用 D3 渲染元素的价格？的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  4. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

  5. ruby - 在 Ruby 中使用匿名模块 - 2

    假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外，还有什么方法可以访问C和m中的其他内容？我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)？如何在使用完匿名模块后将其删除，使其定义的常量不再存在？ 最佳答案 三个答案:是的，使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于

  6. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我

  7. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  8. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  9. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  10. ruby - 将差异补丁应用于字符串/文件 - 2

    对于具有离线功能的智能手机应用程序，我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl

随机推荐