如何在iOS中创建像d3这样的气泡图

Question

我需要在我的项目中创建类似的气泡图。我尝试使用collectionview，但我面临着细胞框架的问题。什么是在iOS中绘制它的最佳方式？

Answer 1

请检查此框架，它允许您使用Cool Animation Magnetic

的此功能

Answer 2

通过快速使用wkWebView相对容易实现此功能。

基本逻辑是让wkWebView呈现d3.js，而不是迅速编写集合视图。

• 步骤1。准备d3.js的源代码以及index.html文件和CSS文件。 （请先确保它们在正常的Web浏览器中可以正常工作。）
• 第二步。将d3.js，index.html和CSS文件放在文件夹中。确保这些文件的路径名正确。例如;我的index.html中有<script src="./colorPicker.js"></script>。
• 第3步。下载d3库，该库是一个名为d3.min.js的文件。 （遵循本教程。https://www.tutorialspoint.com/d3js/d3js_installation.htm）将d3.min.js文件以及d3.js，index.html和CSS文件放入文件夹中。
• 第4步。将文件夹移到Xcode（您的iOS项目目录）。
• 第5步。将WebKit导入控制器中，初始化WebView，设置该WebView的URL路径，然后将此视图添加为控制器的子视图。

  var webView = WKWebView()  
  webView.frame = CGRect(x: 0, y: 0, width: 100, height: 600)
  let htmlPath = Bundle.main.path(forResource: "./index", ofType: "html")
  let url = URL(fileURLWithPath: htmlPath!)
  let request = URLRequest(url: url)
  webView.load(request)
  self.addSubview(webView)

这是我在项目中将d3.js和Swift混合在一起的方法。观看此链接https://www.linkedin.com/in/michaellinliu/detail/recent-activity/shares/上的简短演示视频

Answer 3

如果您打算在Swift中进行此操作，建议您使用SpriteKit或学习SwiftUI绘图。

SpriteKit是Apple的2D框架，最初创建时考虑了基于2D Sprite的游戏。但是它也非常适合制作复杂的图形和动画。这样做的好处是SpriteKit内置了物理功能，如果您打算为气泡设置动画，这可能会派上用场。

SwiftUI是Apple的新UI框架。它是创建用户界面的工具。但这也是非常有效和强大的。如果有可能在SwiftUI中创建这样的布局，那将是一个不错的选择。请参阅this WWDC session，以了解有关在SwiftUI中进行绘制的更多信息。