2024-05-23 14:02:05

OpenDocCN · May 23, 2024 · 8d4db1d · 8d4db1d
1 parent bc33e62
commit 8d4db1d
Show file tree

Hide file tree

Showing 31 changed files with 9,864 additions and 3,382 deletions.
diff --git a/totrans/ms-js_01.md.json b/totrans/ms-js_01.md.json
diff --git a/totrans/ms-js_01.yaml b/totrans/ms-js_01.yaml
diff --git a/totrans/ms-js_02.yaml b/totrans/ms-js_02.yaml
diff --git a/totrans/ms-js_03.yaml b/totrans/ms-js_03.yaml
diff --git a/totrans/ms-js_04.yaml b/totrans/ms-js_04.yaml
diff --git a/totrans/ms-js_05.yaml b/totrans/ms-js_05.yaml
diff --git a/totrans/ms-js_06.yaml b/totrans/ms-js_06.yaml
diff --git a/totrans/ms-js_07.yaml b/totrans/ms-js_07.yaml
diff --git a/totrans/ms-js_08.yaml b/totrans/ms-js_08.yaml
diff --git a/totrans/ms-js_09.yaml b/totrans/ms-js_09.yaml
diff --git a/totrans/sencha-tch2-mobi-js-fw_00.yaml b/totrans/sencha-tch2-mobi-js-fw_00.yaml
diff --git a/totrans/sencha-tch2-mobi-js-fw_01.yaml b/totrans/sencha-tch2-mobi-js-fw_01.yaml
diff --git a/totrans/sencha-tch2-mobi-js-fw_02.yaml b/totrans/sencha-tch2-mobi-js-fw_02.yaml
diff --git a/totrans/sencha-tch2-mobi-js-fw_03.yaml b/totrans/sencha-tch2-mobi-js-fw_03.yaml
diff --git a/totrans/sencha-tch2-mobi-js-fw_04.yaml b/totrans/sencha-tch2-mobi-js-fw_04.yaml
diff --git a/totrans/sencha-tch2-mobi-js-fw_05.yaml b/totrans/sencha-tch2-mobi-js-fw_05.yaml
diff --git a/totrans/sencha-tch2-mobi-js-fw_06.yaml b/totrans/sencha-tch2-mobi-js-fw_06.yaml
diff --git a/totrans/sencha-tch2-mobi-js-fw_07.yaml b/totrans/sencha-tch2-mobi-js-fw_07.yaml
diff --git a/totrans/sencha-tch2-mobi-js-fw_08.yaml b/totrans/sencha-tch2-mobi-js-fw_08.yaml
diff --git a/totrans/sencha-tch2-mobi-js-fw_09.yaml b/totrans/sencha-tch2-mobi-js-fw_09.yaml
diff --git a/totrans/soc-dtvis-j5-js_0.yaml b/totrans/soc-dtvis-j5-js_0.yaml
diff --git a/totrans/soc-dtvis-j5-js_1.yaml b/totrans/soc-dtvis-j5-js_1.yaml
diff --git a/totrans/soc-dtvis-j5-js_2.yaml b/totrans/soc-dtvis-j5-js_2.yaml
diff --git a/totrans/soc-dtvis-j5-js_3.yaml b/totrans/soc-dtvis-j5-js_3.yaml
diff --git a/totrans/soc-dtvis-j5-js_4.yaml b/totrans/soc-dtvis-j5-js_4.yaml
diff --git a/totrans/soc-dtvis-j5-js_5.yaml b/totrans/soc-dtvis-j5-js_5.yaml
diff --git a/totrans/soc-dtvis-j5-js_6.yaml b/totrans/soc-dtvis-j5-js_6.yaml
diff --git a/totrans/soc-dtvis-j5-js_7.yaml b/totrans/soc-dtvis-j5-js_7.yaml
diff --git a/totrans/soc-dtvis-j5-js_8.yaml b/totrans/soc-dtvis-j5-js_8.yaml
@@ -1,7 +1,9 @@
 - en: Chapter 8. Google+
+  id: totrans-0
   prefs:
   - PREF_H1
   type: TYPE_NORMAL
+  zh: 第8章。Google+
 - en: Of the major social networking sites, Google+ is the newest entrant. Although
     an upstart, it does have a large user base claiming to have more than 350 million
     active accounts ([http://ca.ign.com/articles/2013/05/02/report-google-bigger-than-twitter-with-359-million-active-users](http://ca.ign.com/articles/2013/05/02/report-google-bigger-than-twitter-with-359-million-active-users)).
@@ -13,169 +15,244 @@
     spam. Google+ provides a read-only API that we can leverage to create visualizations;
     however, the API is very limited in comparison to other such APIs—while this book
     is being written you cannot even list the members of a circle.
+  id: totrans-1
   prefs: []
   type: TYPE_NORMAL
+  zh: 在主要的社交网站中，Google+是最新的成员。虽然是个新手，但它确实拥有庞大的用户基础，声称拥有超过3.5亿活跃账户（[http://ca.ign.com/articles/2013/05/02/report-google-bigger-than-twitter-with-359-million-active-users](http://ca.ign.com/articles/2013/05/02/report-google-bigger-than-twitter-with-359-million-active-users)）。这并非Google首次尝试打入价值十亿美元的社会媒体市场。他们过去曾创建过Google
+    Buzz、Google Friend Connect和Orkut，试图获得大量用户基础。除Orkut外都已停止使用，其用户基础几乎全部位于巴西。Google故意没有创建写入API，希望这能消除自动发布的垃圾信息。Google+提供了一个只读API，我们可以利用它来创建可视化；然而，与其他此类API相比，该API非常有限——在本书撰写时，你甚至不能列出一个圈子的成员。
 - en: Creating an app
+  id: totrans-2
   prefs:
   - PREF_H1
   type: TYPE_NORMAL
+  zh: 创建一个应用
 - en: Google+ is another OAuth 2.0 site so we, of course, need to get an application
     key as the first step to creating any visualization. This also means that we will
     need a return URL, so again we'll need to set up an HTTP server to run the visualization.
+  id: totrans-3
   prefs: []
   type: TYPE_NORMAL
+  zh: Google+是另一个OAuth 2.0网站，因此我们当然需要获取一个应用程序密钥作为创建任何可视化的第一步。这也意味着我们将需要一个返回URL，因此我们再次需要设置一个HTTP服务器来运行可视化。
 - en: The first step is to log into [https://code.google.com/apis/console](https://code.google.com/apis/console)
     using your Google account. Should you not have such an account, you can also create
     one from that page. Once on the site, you'll be presented with a giant button
     allowing you to create an application project. This console actually governs the
     access to all of Google's APIs, and there are quite a few.
+  id: totrans-4
   prefs: []
   type: TYPE_NORMAL
+  zh: 第一步是使用你的Google账户登录[https://code.google.com/apis/console](https://code.google.com/apis/console)。如果你没有这样的账户，你也可以从那个页面创建一个。一旦到达该网站，你将看到一个巨大的按钮，允许你创建一个应用程序项目。这个控制台实际上管理着Google所有API的访问权限，而且有很多。
 - en: Next, you'll be presented with a huge list of the various APIs. If you scroll
     way down, you'll eventually find Google+ (use the search, it will save hours of
     scrolling). Toggle the switch to the "on" position. You may need to agree to a
     couple of user agreements. Be sure to read the entire agreement as you always
     do.
+  id: totrans-5
   prefs: []
   type: TYPE_NORMAL
+  zh: 接下来，你将看到一个各种API的巨大列表。如果你向下滚动很久，最终会找到Google+（使用搜索功能，这将节省你数小时的滚动时间）。将开关切换到“开启”位置。你可能需要同意几个用户协议。确保像往常一样阅读整个协议。
 - en: 'The next step is to request a new key, as shown in the following screenshot.
     This can be done from the **API Access** tab in which you should click on **Create
     an OAuth 2.0 client ID…**. In the dialog that opens, you''ll need to fill in an
     application name and a URL. This is not the URL for the OAuth exchange; that comes
     in the next tab. On this tab, enter a URL from which the OAuth request may originate
     and to which it should return. For our purposes, `http://localhost:8080` will
     be the domain:'
+  id: totrans-6
   prefs: []
   type: TYPE_NORMAL
+  zh: 下一步是请求一个新的密钥，如下面的截图所示。这可以在**API访问**标签中完成，在此标签中你应该点击**创建OAuth 2.0客户端ID…**。在打开的对话框中，你需要填写一个应用程序名称和一个URL。这不是OAuth交换的URL；那在下一个标签里。在这个标签中，输入一个URL，OAuth请求可能从中发起并返回。对于我们来说，`http://localhost:8080`将是域名：
 - en: '![Creating an app](img/6542OS_08_01.jpg)'
+  id: totrans-7
   prefs: []
   type: TYPE_IMG
+  zh: '![创建一个应用](img/6542OS_08_01.jpg)'
 - en: We'll then receive a couple of keys ready for use in our application. The client
     ID is the field you want to use in your scripts.
+  id: totrans-8
   prefs: []
   type: TYPE_NORMAL
+  zh: 然后我们将收到几个供我们应用程序使用的密钥。客户端ID是你想在脚本中使用的字段。
 - en: Retrieving data
+  id: totrans-9
   prefs:
   - PREF_H1
   type: TYPE_NORMAL
+  zh: 检索数据
 - en: 'As with Facebook, we could do manual authentication against the OAuth 2.0 endpoint,
     but let''s make use of Google''s provided API. Hooking it up is very simple:'
+  id: totrans-10
   prefs: []
   type: TYPE_NORMAL
+  zh: 和Facebook一样，我们可以针对OAuth 2.0端点进行手动认证，但让我们使用Google提供的API。连接起来非常简单：
 - en: '[PRE0]'
+  id: totrans-11
   prefs: []
   type: TYPE_PRE
+  zh: '[PRE0]'
 - en: This runs once the document is ready and loads the API script from Google's
     servers by placing a new `script` tag on the page just before the tag including
     jQuery. The loaded document contains a number of JavaScript functions that can
     be used to interact with Google APIs but not specifically Google+ APIs—that happens
     after login.
+  id: totrans-12
   prefs: []
   type: TYPE_NORMAL
+  zh: 当文档准备就绪时，这将运行并从Google服务器加载API脚本，通过在页面中插入一个新的`script`标签，该标签位于包含jQuery的标签之前。加载的文档包含一组可以与Google
+    API交互的JavaScript函数，但不是特定于Google+ API——这发生在登录之后。
 - en: 'To add a login button, we add the following HTML code:'
+  id: totrans-13
   prefs: []
   type: TYPE_NORMAL
+  zh: 要添加一个登录按钮，我们添加以下HTML代码：
 - en: '[PRE1]'
+  id: totrans-14
   prefs: []
   type: TYPE_PRE
+  zh: '[PRE1]'
 - en: 'This will generate the login button. The various `data-` properties attached
     to this button are processed by the script that we loaded from Google. The login
     is scoped to Google+ instead of one of the other Google APIs. The Client ID should
     be set to the one that was retrieved when creating the app. Most importantly,
     a callback function is assigned that will be activated when the request to log
     in succeeds. The callback will dynamically load the Google+ API:'
+  id: totrans-15
   prefs: []
   type: TYPE_NORMAL
+  zh: 这将生成登录按钮。这个按钮上附着的各种`data-`属性由我们从Google加载的脚本处理。登录是对Google+而不是其他Google API的。客户端ID应设置为创建应用时获取的ID。最重要的是，指派了一个回调函数，当登录请求成功时将被激活。回调将动态加载Google+
+    API：
 - en: '[PRE2]'
+  id: totrans-16
   prefs: []
   type: TYPE_PRE
+  zh: '[PRE2]'
 - en: 'Once the API for Google+ is loaded, we can make use of it, as we are doing
     in the highlighted line. This function also hides the sign in button, so users
     don''t attempt to sign in more than once. `retreiveFriends` is simple and will
     just send off a request to retrieve a list of friends:'
+  id: totrans-17
   prefs: []
   type: TYPE_NORMAL
+  zh: 一旦加载了Google+的API，我们就可以利用它，正如我们在高亮行所做的那样。这个函数还隐藏了登录按钮，所以用户不会尝试多次登录。`retreiveFriends`简单且只会发送一个请求以获取朋友列表：
 - en: '[PRE3]'
+  id: totrans-18
   prefs: []
   type: TYPE_PRE
+  zh: '[PRE3]'
 - en: Now that we have a list of friends, we can set about building a simple visualization
     using them.
+  id: totrans-19
   prefs: []
   type: TYPE_NORMAL
+  zh: 现在我们有了朋友列表，我们可以开始使用它们来构建一个简单的可视化。
 - en: Visualization
+  id: totrans-20
   prefs:
   - PREF_H1
   type: TYPE_NORMAL
+  zh: 可视化
 - en: '`d3` purposefully steers away from providing concrete visualizations. There
     is no single function you can call to get a bar chart or a scatter plot. Instead,
     it provides tools around creating the visualizations; these tools in turn provide
     a high degree of flexibility and empowers the creation of unique visualizations.
     One of the more powerful tools is the layout mechanism. Layouts provide some of
     the boilerplate code that would have to be written to achieve a certain sort of
     visualization.'
+  id: totrans-21
   prefs: []
   type: TYPE_NORMAL
+  zh: '`d3`故意避开了提供具体的可视化。没有一个函数你可以调用以得到条形图或散点图。相反，它提供了创建可视化的工具；这些工具进而提供高度的灵活性，并赋予创建独特可视化的能力。其中较为强大的工具之一是布局机制。布局提供了一些必须编写以实现某种可视化的样板代码。'
 - en: We're going to make use of the **Force-directed graph** layout. Force-directed
     graphs provide a way of visualizing data that is interconnected. The strength
     of the bonds between nodes is frequently a function of how closely related the
     nodes are.
+  id: totrans-22
   prefs: []
   type: TYPE_NORMAL
+  zh: 我们将使用**力导向图**布局。力导向图提供了一种可视化相互连接数据的方法。节点之间联系的强度通常是一个关于节点之间关系密切程度的函数。
 - en: 'Our first step is to transform our data into a list of nodes and edges. As
     the API returns such limited data, we''ll only be able to establish relationships
     between you and your friends. Those relationships will make up the edges or links,
     and the friends, the nodes:'
+  id: totrans-23
   prefs: []
   type: TYPE_NORMAL
+  zh: 我们的第一步是将我们的数据转换为节点和边的列表。由于API返回的数据非常有限，我们只能建立你和你朋友之间的关系。这些关系将构成边或链接，而朋友则是节点：
 - en: '[PRE4]'
+  id: totrans-24
   prefs: []
   type: TYPE_PRE
+  zh: '[PRE4]'
 - en: 'Now that we have the nodes and links, we can create a force layout using them:'
+  id: totrans-25
   prefs: []
   type: TYPE_NORMAL
+  zh: 现在我们有了节点和链接，我们可以使用它们来创建一个力布局：
 - en: '[PRE5]'
+  id: totrans-26
   prefs: []
   type: TYPE_PRE
+  zh: '[PRE5]'
 - en: 'The `charge` and `linkDistance` functions govern how widely the nodes disperse
     themselves. For the links, we draw a simple line to represent them:'
+  id: totrans-27
   prefs: []
   type: TYPE_NORMAL
+  zh: '`charge`和`linkDistance`函数控制节点分散自己的范围。对于链接，我们绘制一条简单的线来表示它们：'
 - en: '[PRE6]'
+  id: totrans-28
   prefs: []
   type: TYPE_PRE
+  zh: '[PRE6]'
 - en: 'The nodes are a bit more complicated, because for each one we need to set a
     picture taken from the Google+ data, the initial location, as well as the dimensions.
     We also need to attach an event handler to the nodes so that when dragged, the
     `force.drag` action is fired:'
+  id: totrans-29
   prefs: []
   type: TYPE_NORMAL
+  zh: 节点有点复杂，因为对于每一个我们需要从Google+数据中设置一个图片，初始位置以及大小。我们还需要给节点附加一个事件处理程序，这样当拖动时，`force.drag`动作会被触发：
 - en: '[PRE7]'
+  id: totrans-30
   prefs: []
   type: TYPE_PRE
+  zh: '[PRE7]'
 - en: 'Finally, we need to instruct `d3` what action should be taken on each tick
     when animating the graph:'
+  id: totrans-31
   prefs: []
   type: TYPE_NORMAL
+  zh: 最后，我们需要指示`d3`在动画化图形时对每个刻度采取什么行动：
 - en: '[PRE8]'
+  id: totrans-32
   prefs: []
   type: TYPE_PRE
+  zh: '[PRE8]'
 - en: 'This will result in a graphic that shows my links to friends on Google+, as
     shown in the following screenshot. If you click and drag a node, it will move
     and all the nodes will rebalance themselves to account for the movement:'
+  id: totrans-33
   prefs: []
   type: TYPE_NORMAL
+  zh: 这将生成一个图表，显示我在Google+上与朋友的链接，如下面的屏幕截图所示。如果你点击并拖动一个节点，它将会移动，所有节点都会重新平衡自己以适应这种移动：
 - en: '![Visualization](img/6542OS_08_02.jpg)'
+  id: totrans-34
   prefs: []
   type: TYPE_IMG
+  zh: '![可视化](img/6542OS_08_02.jpg)'
 - en: Summary
+  id: totrans-35
   prefs:
   - PREF_H1
   type: TYPE_NORMAL
+  zh: 摘要
 - en: The `limited` API of Google+ does limit some of the visualizations we can create.
     There has been a rumor for years that Google will surface additional functionality
     in Google+, but I have seen no real action so far. You should now be able to authenticate
     against Google+ and retrieve data from it. You should also be able to make use
     of the graphically pleasing force-directed layout from `d3` as well as any of
     the other available layouts.
+  id: totrans-36
   prefs: []
   type: TYPE_NORMAL
+  zh: Google+的`limited` API确实限制了我们可以创建的一些可视化。多年来一直有传言称Google将在Google+中提供额外的功能，但到目前为止我还没有看到任何真正的行动。你现在应该能够对Google+进行身份验证并从中获取数据。你也应该能够使用`d3`提供的图形美观的力导向布局以及其他可用的布局。
diff --git a/totrans/tnk-js_0.yaml b/totrans/tnk-js_0.yaml
@@ -1,14 +1,20 @@
 - en: Overview
+  id: totrans-0
   prefs:
   - PREF_H1
   type: TYPE_NORMAL
+  zh: 概览
 - en: Instead of wandering through loads of theory, we have used practical examples
     in this book. The examples in this book are compatible with almost every browser.
     Instead of using the verbatim code, you can modify the code and see the change
     in the output thereby understanding the subtle nuances of JavaScript.
+  id: totrans-1
   prefs: []
   type: TYPE_NORMAL
+  zh: 本书没有涉及大量的理论，而是使用了实际例子。本书中的例子几乎兼容所有的浏览器。你无需使用逐字代码，可以修改代码并观察输出的变化，从而理解JavaScript的微妙差异。
 - en: By the end of the book, with practice, you can achieve better things and get
     more acquainted with JavaScript.
+  id: totrans-2
   prefs: []
   type: TYPE_NORMAL
+  zh: 到本书结束时，通过实践，你可以取得更好的成果并更加熟悉JavaScript。