Check this sweet data out:
\n \n\n \n \n\n```\n\n呼！ 同样，不必担心这段代码的主要功能。 这里值得注意的是顶行--`var data = <%= languages %>;`--它表示我们正在将先前创建的 `languages` 数组传递到 ERB 中进行处理。\n\n如“面向大众的 D3”所述，这未必是 D3 的最佳用法。 它的目的在于说明如何将该库与 Octokit 搭配使用，以实现一些非常棒的项目。\n\n## 结合不同的 API 调用\n\n现在是时候坦白了：存储库中的 `language` 属性仅标识定义的“主要”语言。 这意味着，如果存储库结合了多种语言，则代码字节数最多的语言将被视为主要语言。\n\n让我们结合使用几个 API 调用来\\_真正\\_呈现哪种语言在我们所有代码中写入的字节数最多。 相比简单的计数，[树状图](https://www.d3-graph-gallery.com/treemap.html)应是直观展示编码语言使用量的好方法。 我们需要构造一个如下所示的对象数组：\n\n```json\n[ { \"name\": \"language1\", \"size\": 100},\n { \"name\": \"language2\", \"size\": 23}\n ...\n]\n```\n\n我们在前面已经获取了存储库列表，现在来检查每个存储库，然后调用 [GET /repos/{owner}/{repo}/languages endpoint](/zh/rest/repos/repos#list-repository-languages)：\n\n```ruby\nrepos.each do |repo|\n repo_name = repo.name\n repo_langs = octokit_client.languages(\"#{github_user.login}/#{repo_name}\")\nend\n```\n\n我们将累积添加找到的每种语言到一个语言列表中。\n\n```ruby\nrepo_langs.each do |lang, count|\n if !language_obj[lang]\n language_obj[lang] = count\n else\n language_obj[lang] += count\n end\nend\n```\n\n之后，我们将内容格式化为 D3 可以理解的结构：\n\n```ruby\nlanguage_obj.each do |lang, count|\n language_byte_count.push :name => \"#{lang} (#{count})\", :count => count\nend\n\n# some mandatory formatting for D3\nlanguage_bytes = [ :name => \"language_bytes\", :elements => language_byte_count]\n```\n\n（想了解更多 D3 树状图的奇妙之处，请查看[这个入门教程](/zh/rest/repos/repos#list-repository-languages)。）\n\n最后，我们将这些 JSON 信息传递到同一个 ERB 模板：\n\n```ruby\nerb :lang_freq, :locals => { :languages => languages.to_json, :language_byte_count => language_bytes.to_json}\n```\n\n与以前一样，这里有一堆 JavaScript，可以直接将它们放到模板中：\n\n```html\n\n\n```\n\n就这样！ 包含存储库语言信息的精美矩形，按相对比例显示，让你一目了然。 可能需要调整树状图的高度和宽度（作为前两个参数传递到上述 `drawTreemap`），使所有信息适当显示。"}