d3 1,2 #43
Open
d3 1,2 #43
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
可能是你第一次翻译英文吧，存在很多问题。 |
huluoyang
suggested changes
Aug 1, 2018
| @@ -13,43 +13,43 @@ | |||
| } | |||
| ], | |||
| "description": [ | |||
| "D3 has several methods that let you add and change elements in your document.", | |||
| "The <code>select()</code> method selects one element from the document. It takes an argument for the name of the element you want and returns an HTML node for the first element in the document that matches the name. Here's an example:", | |||
| "D3 提供了多种方法让你添加或改变你的文本中的元素。", | |||
There was a problem hiding this comment.
请先细读翻译规范，这句话明显啰嗦。
D3 有多种方法可以用来在文档中增加元素、修改元素。
这里的 your 是代词，不用翻译的。
| "D3 has several methods that let you add and change elements in your document.", | ||
| "The <code>select()</code> method selects one element from the document. It takes an argument for the name of the element you want and returns an HTML node for the first element in the document that matches the name. Here's an example:", | ||
| "D3 提供了多种方法让你添加或改变你的文本中的元素。", | ||
| "<code>select()</code> 从文本中选择一个元素。 他的参数是你想选择的元素的名字，返回一个 HTML 结点给文本中第一个和这个名字匹配的元素。下面是一个例子：", |
There was a problem hiding this comment.
document => 文档
It => 它
你看这样翻译会不会流畅点：
<code>select()</code> 方法用来从文档从选择元素，它以你想查询的元素名称作为参数，返回第一个符合条件的 HTML 节点。
| "Here's an example that selects an unordered list, appends a list item, and adds text:", | ||
| "上面这个例子找到页面上的第一个 a标签（锚标签）, 在变量 <code>anchor</code> 中保存一个 HTML 结点。 你还可以用其他方法来选择。 例子中的 \"d3\" 是对 D3 对象的引用，可以通过他来访问 D3 的方法", | ||
| "其他两个很有用的方法是 <code>append()</code> 和 <code>text()</code> 。", | ||
| "<code>append()</code> 的参数是你想添加到文本中的的元素。 他给选择的元素添加一个HTML结点， 返回那个结点的句柄。", |
There was a problem hiding this comment.
的的 => 的
他 => 它
document => 文档
这一段请重新翻译，行文不流畅。
There was a problem hiding this comment.
这样是否可行呢？
上面这个例子找到页面上的第一个a标签（锚标签），将它作为一个HTML结点保存在变量<code>anchor</code>中。你也可以用其他的方法选择页面上的元素。例子中的 \"d3\" 是对 D3 对象的引用，可以通过它来访问 D3 的方法。
还可以用<code>append()</code> 和 <code>text()</code> 方法。
<code>append()</code>方法以你想添加到文档中的元素作为参数，给选中的元素添加一个HTML结点，返回那个结点的句柄。
<code>text()</text>方法既可以给节点设置新的文本，也可以获取节点的当前文本。 如果要设置文字内容，需要在圆括号中传入一个string类型的参数。
这里是一个选择无序列表、添加列表项和文字的例子：
| "上面这个例子找到页面上的第一个 a标签（锚标签）, 在变量 <code>anchor</code> 中保存一个 HTML 结点。 你还可以用其他方法来选择。 例子中的 \"d3\" 是对 D3 对象的引用，可以通过他来访问 D3 的方法", | ||
| "其他两个很有用的方法是 <code>append()</code> 和 <code>text()</code> 。", | ||
| "<code>append()</code> 的参数是你想添加到文本中的的元素。 他给选择的元素添加一个HTML结点， 返回那个结点的句柄。", | ||
| "<code>text()</text> 设置选中结点的文字内容或者得到当前的文字内容。 如果要设置文字内容，需要在圆括号中传入一个string类型的参数。", |
There was a problem hiding this comment.
method 总是自动忽略了，全局都有这个问题。
The text() method either sets the text of the selected node, or gets the current text.
text() 方法既可以给节点设置新的文本，也可以获取节点的当前文本。
| "其他两个很有用的方法是 <code>append()</code> 和 <code>text()</code> 。", | ||
| "<code>append()</code> 的参数是你想添加到文本中的的元素。 他给选择的元素添加一个HTML结点， 返回那个结点的句柄。", | ||
| "<code>text()</text> 设置选中结点的文字内容或者得到当前的文字内容。 如果要设置文字内容，需要在圆括号中传入一个string类型的参数。", | ||
| "这里是一个例子。选择一个无序列表，添加列表项，添加文字：", |
There was a problem hiding this comment.
是指中英文混用还是符号使用位置不当呢？
除去<code>中的使用英文符号，其他全部使用中文符号。
| "<code>const anchors = d3.selectAll(\"a\");</code>", | ||
| "Like the <code>select()</code> method, <code>selectAll()</code> supports method chaining, and you can use it with other methods.", | ||
| "像方法 <code>select()</code> 一样，<code>selectAll()</code> 也支持链式法则，你也可以用于其他方法。", |
| @@ -86,24 +86,24 @@ | |||
| } | |||
| ], | |||
| "description": [ | |||
| "D3 also has the <code>selectAll()</code> method to select a group of elements. It returns an array of HTML nodes for all the items in the document that match the input string. Here's an example to select all the anchor tags in a document:", | |||
| "<code>selectAll()</code> 方法选择一组元素。 它以 HTML 结点数组的形式返回该文本中所有匹配所输入字符串的对象。 这里是一个选择文本中所有锚标签的例子：", | |||
huluoyang
added
the
need update
S1ngS1ng
suggested changes
Aug 8, 2018
| "D3 has several methods that let you add and change elements in your document.", | ||
| "The <code>select()</code> method selects one element from the document. It takes an argument for the name of the element you want and returns an HTML node for the first element in the document that matches the name. Here's an example:", | ||
| "D3 有多种方法可以用来在文档中增加元素、修改元素", | ||
| "<code>select()</code>方法用来从文档中选择元素，它以你想查询的元素名称作为参数，返回第一个符合条件的HTML结点。这里是一个例子：", |
| @@ -13,43 +13,43 @@ | |||
| } | |||
| ], | |||
| "description": [ | |||
| "D3 has several methods that let you add and change elements in your document.", | |||
| "The <code>select()</code> method selects one element from the document. It takes an argument for the name of the element you want and returns an HTML node for the first element in the document that matches the name. Here's an example:", | |||
| "D3 有多种方法可以用来在文档中增加元素、修改元素", | |||
| "The <code>append()</code> method takes an argument for the element you want to add to the document. It appends an HTML node to a selected item, and returns a handle to that node.", | ||
| "The <code>text()</code> method either sets the text of the selected node, or gets the current text. To set the value, you pass a string as an argument inside the parentheses of the method.", | ||
| "Here's an example that selects an unordered list, appends a list item, and adds text:", | ||
| "上面这个例子找到页面上的第一个a标签（锚标签），将它作为一个HTML结点保存在变量<code>anchor</code>中。你也可以用其他的方法选择页面上的元素。例子中的 \"d3\" 是对 D3 对象的引用，可以通过它来访问 D3 的方法。", |
There was a problem hiding this comment.
全半角之间加空格。比如这里的 a 和 HTML。请仔细检查，后面还有
去掉结尾多余的空格
| "上面这个例子找到页面上的第一个a标签（锚标签），将它作为一个HTML结点保存在变量<code>anchor</code>中。你也可以用其他的方法选择页面上的元素。例子中的 \"d3\" 是对 D3 对象的引用，可以通过它来访问 D3 的方法。", | ||
| "还可以用<code>append()</code>和<code>text()</code>方法。", | ||
| "<code>append()</code>方法以你想添加到文档中的元素作为参数，给选中的元素添加一个HTML结点，返回那个结点的句柄。", | ||
| "<code>text()</text>方法既可以给节点设置新的文本，也可以获取节点的当前文本。 如果要设置文字内容，需要在圆括号中传入一个 string（字符串）类型的参数。", |
| "Use the <code>select</code> method to select the <code>body</code> tag in the document. Then <code>append</code> an <code>h1</code> tag to it, and add the text \"Learning D3\" into the <code>h1</code> element." | ||
| ], | ||
| "<code>select</code>方法选择文本中的<code>body</code>标签。<code>append</code>方法添加一个<code>h1</code>标签给它，同时在<code>h1</code>中添加文本 \"Learning D3\"。" | ||
| ], |
There was a problem hiding this comment.
去掉额外的空格。下同
这一条是描述挑战内容的，可以适当地加一些导语，而且整体也应通顺一些：
使用<code>select</code>方法选择文本中的<code>body</code>标签，然后用<code>append</code>方法为它添加一个<code>h1</code>标签，同时在<code>h1</code>中添加文本 \"Learning D3\"。
| "D3 的库是数据驱动的。可以使用 D3 的方法将数组形式的数据显示在页面上。", | ||
| "第一步是让 D3 知道数据。<code>data</code>方法选择连接着数据的 DOM 元素。数据集作为参数传递给该方法。", | ||
| "常见的方法是在文档中为数据集中的每一个数据创建一个元素。D3 使用<code>enter()</code>方法", | ||
| "当<code>enter()</code>和<code>data()</code>方法连接使用时，它把从页面中选择的元素和数据集中的元素作比较。如果页面中选择的元素较少则创建缺少的元素。", |
There was a problem hiding this comment.
当<code>enter()</code>和<code>data()</code>方法连接使用时 =>
当<code>enter()</code>和<code>data()</code>方法一起使用时
| "<blockquote><body><br> <ul></ul><br> <script><br> const dataset = [\"a\", \"b\", \"c\"];<br> d3.select(\"ul\").selectAll(\"li\")<br> .data(dataset)<br> .enter()<br> .append(\"li\")<br> .text(\"New item\");<br> </script><br></body></blockquote>", | ||
| "It may seem confusing to select elements that don't exist yet. This code is telling D3 to first select the <code>ul</code> on the page. Next, select all list items, which returns an empty selection. Then the <code>data()</code> method reviews the dataset and runs the following code three times, once for each item in the array. The <code>enter()</code> method sees there are no <code>li</code> elements on the page, but it needs 3 (one for each piece of data in <code>dataset</code>). New <code>li</code> elements are appended to the <code>ul</code> and have the text \"New item\".", | ||
| "选择不存在的元素似乎有些难以理解。这段代码先选择页面上的<code>ul</code>元素，再选择所有的列表项，它将返回空。然后<code>data()</code>方法接收数组作为参数，并运行下面的代码三次，每次对应数组中的一个对象。<code>enter()</code>方法发现页面中没有<code>li</code>元素，但是需要 3 个（每个对应<code>dataset</code>中的一个对象）。它将在<code>ul</code>中添加带有文本 \"New item\" 的<code>li</code>元素", |
There was a problem hiding this comment.
这句不是很通顺，建议对照题目重新翻译一下。不要逐字逐句地翻译
| "<hr>", | ||
| "Select the <code>body</code> node, then select all <code>h2</code> elements. Have D3 create and append an <code>h2</code> tag for each item in the <code>dataset</code> array. The text in the <code>h2</code> should say \"New Title\". Your code should use the <code>data()</code> and <code>enter()</code> methods." | ||
| "选择<code>body</code>结点，然后选择所有的<code>h2</code>元素。让 D3 为<code>dataset</code>数组中的每一个对象创建并添加文本为 \"New Title\" 的<code>h2</code>标签。你应该使用<code>data()</code>和<code>enter()</code>方法。" |
| "In the previous challenge, you created a new <code>h2</code> element for each item in the <code>dataset</code> array, but they all contained the same text, \"New Title\". This is because you have not made use of the data that is bound to each of the <code>h2</code> elements.", | ||
| "The D3 <code>text()</code> method can take a string or a callback function as an argument:", | ||
| "最后两个基本的关于用 D3 动态显示数据的方式是<code>data()</code>和<code>enter()</code>方法。它们以数据集为参数，和<code>append()</code>方法一起使用，为数据集中的每一个元素对象创建一个 DOM 元素。", | ||
| "在之前的挑战中，你为<code>dataset</code>数组中的每一个对象创建了一个新的<code>h2</code>元素，但是他们的文本都是相同的 \"New Title\"。 因为你还没有使用和每个<code>h2</code>元素关联的数据。", |
| "<hr>", | ||
| "Change the <code>text()</code> method so that each <code>h2</code> element displays the corresponding value from the <code>dataset</code> array with a single space and \"USD\". For example, the first heading should be \"12 USD\"." | ||
| "改变<code>text()</code>方法那么每个<code>h2</code>元素显示<code>dataset</code>数组中的对应值加上一个空格和 \"USD\"。例如，第一个标题应该为 \"12 USD\"。" |
huluoyang
suggested changes
Aug 16, 2018
| "The bars are in the right position, but they are all the same black color. SVG has a way to change the color of the bars.", | ||
| "In SVG, a <code>rect</code> shape is colored with the <code>fill</code> attribute. It supports hex codes, color names, and rgb values, as well as more complex options like gradients and transparency.", | ||
| "<hr>", | ||
| "Add an <code>attr()</code> method to set the \"fil |
There was a problem hiding this comment.
New item 的转义符号\ 不能丢，否则就会如上面红色一样的报错。
| "The bars are in the right position, but they are all the same black color. SVG has a way to change the color of the bars.", | ||
| "In SVG, a <code>rect</code> shape is colored with the <code>fill</code> attribute. It supports hex codes, color names, and rgb values, as well as more complex options like gradients and transparency.", | ||
| "<hr>", | ||
| "Add an <code>attr()</code> method to set the \"fil |
| "The bars are in the right position, but they are all the same black color. SVG has a way to change the color of the bars.", | ||
| "In SVG, a <code>rect</code> shape is colored with the <code>fill</code> attribute. It supports hex codes, color names, and rgb values, as well as more complex options like gradients and transparency.", | ||
| "<hr>", | ||
| "Add an <code>attr()</code> method to set the \"fil |
There was a problem hiding this comment.
your code 这里的 code 应该不翻译。
你应该使用<code>data()</code>方法。
| "The bars are in the right position, but they are all the same black color. SVG has a way to change the color of the bars.", | ||
| "In SVG, a <code>rect</code> shape is colored with the <code>fill</code> attribute. It supports hex codes, color names, and rgb values, as well as more complex options like gradients and transparency.", | ||
| "<hr>", | ||
| "Add an <code>attr()</code> method to set the \"fil |
| "The bars are in the right position, but they are all the same black color. SVG has a way to change the color of the bars.", | ||
| "In SVG, a <code>rect</code> shape is colored with the <code>fill</code> attribute. It supports hex codes, color names, and rgb values, as well as more complex options like gradients and transparency.", | ||
| "<hr>", | ||
| "Add an <code>attr()</code> method to set the \"fil |
There was a problem hiding this comment.
最后两个挑战涉及到使用D3的data()和enter()方法来动态展示数据。
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
翻译章节
《data-visualization —— data-visualization-with-d3》
变更文件
data-visualization-with-d3.json
data-visualization-with-d3.md
翻译进度
7/29