ios - 如何在 iOS 中创建类似 d3 的气泡图

Question

我需要在我的项目中创建如下所示的类似气泡图。我尝试使用 collectionview，但我遇到了单元格框架的问题。在 iOS 中绘制它的最佳方式是什么？

Answer 1

在swift中使用wkWebView实现这个功能相对容易。

基本逻辑是让wkWebView渲染d3.js，而不是用swift写collection view。

• 第一步。准备 d3.js 的源代码以及 index.html 文件和 CSS 文件。 (首先确保它们在普通网络浏览器中正常工作。)
• 第二步。将 d3.js、index.html 和 CSS 文件放在一个文件夹中。确保这些文件的路径名是正确的。例如;我有<script src="./colorPicker.js"></script>在我的 index.html 中。
• 第 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 步。在您的 Controller 中导入 WebKit，初始化一个 webView，设置此 webView 的 URL 路径，并将此 View 添加为您的 Controller 的 subview 。

  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/