From 4605ec5ec6587f4578fb0ff1ae3b7c6e5c116278 Mon Sep 17 00:00:00 2001 From: ZhichengChen Date: Fri, 18 Sep 2020 00:13:05 +0800 Subject: [PATCH] fix(i18n): update Chinese translation of data visualization with d3 (#38847) --- ...-a-hover-effect-to-a-d3-element.chinese.md | 62 ++++++-- .../add-a-tooltip-to-a-d3-element.chinese.md | 103 ++++++++++---- ...tributes-to-the-circle-elements.chinese.md | 82 ++++++++--- .../add-axes-to-a-visualization.chinese.md | 112 ++++++++++++--- .../add-classes-with-d3.chinese.md | 50 +++++-- .../add-document-elements-with-d3.chinese.md | 56 +++++--- .../add-inline-styling-to-elements.chinese.md | 42 ++++-- .../add-labels-to-d3-elements.chinese.md | 73 +++++++--- ...-labels-to-scatter-plot-circles.chinese.md | 89 +++++++++--- .../change-styles-based-on-data.chinese.md | 61 +++++--- ...nge-the-color-of-an-svg-element.chinese.md | 50 +++++-- ...the-presentation-of-a-bar-chart.chinese.md | 68 ++++++--- ...-for-each-data-point-in-the-set.chinese.md | 63 +++++++-- .../create-a-linear-scale-with-d3.chinese.md | 51 +++++-- ...-a-scatterplot-with-svg-circles.chinese.md | 58 ++++++-- .../display-shapes-with-svg.chinese.md | 55 ++++++-- ...y-change-the-height-of-each-bar.chinese.md | 76 +++++++--- ...et-the-coordinates-for-each-bar.chinese.md | 80 ++++++++--- .../invert-svg-elements.chinese.md | 72 ++++++---- .../learn-about-svg-in-d3.chinese.md | 51 +++++-- ...ect-a-group-of-elements-with-d3.chinese.md | 42 ++++-- ...a-domain-and-a-range-on-a-scale.chinese.md | 64 +++++++-- .../style-d3-labels.chinese.md | 60 ++++++-- ...eight-of-an-element-dynamically.chinese.md | 62 +++++--- ...defined-scale-to-place-elements.chinese.md | 132 +++++++++++++----- .../use-dynamic-scales.chinese.md | 99 +++++++++++-- ...and-maximum-values-in-a-dataset.chinese.md | 62 ++++++-- .../work-with-data-in-d3.chinese.md | 64 +++++++-- .../work-with-dynamic-data-in-d3.chinese.md | 58 +++++--- 29 files changed, 1506 insertions(+), 491 deletions(-) diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-a-hover-effect-to-a-d3-element.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-a-hover-effect-to-a-d3-element.chinese.md index 328fa3624f..79f4381746 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-a-hover-effect-to-a-d3-element.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-a-hover-effect-to-a-d3-element.chinese.md @@ -2,22 +2,27 @@ id: 587d7faa367417b2b2512bd4 title: Add a Hover Effect to a D3 Element challengeType: 6 -videoUrl: '' -localeTitle: 将悬停效果添加到D3元素 +forumTopicId: 301469 +localeTitle: 给 D3 元素添加悬停效果 --- ## Description -
当用户用鼠标悬停在其上时，可以添加突出显示条形的效果。到目前为止，矩形的样式使用内置的D3和SVG方法，但您也可以使用CSS。使用attr()方法在SVG元素上设置CSS类。然后，新类的:hover伪类保存任何悬停效果的样式规则。
+
+我们可以为用户的鼠标悬停行为添加高亮显示的效果。到目前为止，矩形的样式应用了内置的 D3 和 SVG 方法，但是你也可以使用 CSS 来实现。 +你可以使用 attr() 方法在 SVG 元素上设置 CSS 类。然后用 :hover 伪类为你新添加的 CSS 类设置鼠标悬停的效果。 +
## Instructions -
使用attr()方法向所有rect元素添加一个bar类。将鼠标悬停在其上时，会将条形的fill颜色更改为棕色。
+
+用 attr() 方法给所有的 rect 元素都添加 bar 类。当鼠标悬停在元素上时，它的 fill 将变为棕色。 +
## Tests
```yml tests: - - text: 你的rect元素应该有一类bar 。 + - text: rect 元素应该有 bar 类。 testString: assert($('rect').attr('class') == "bar"); ``` @@ -56,11 +61,11 @@ tests: .attr("width", 25) .attr("height", (d, i) => 3 * d) .attr("fill", "navy") - // Add your code below this line + // 在下面添加你的代码 - // Add your code above this line + // 在上面添加你的代码 svg.selectAll("text") .data(dataset) @@ -72,7 +77,6 @@ tests: - ``` @@ -85,7 +89,45 @@ tests:
```js -// solution required + + + + ``` -/section> +
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.chinese.md index 5661f40c8a..cbe7e4c4bc 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.chinese.md @@ -2,40 +2,45 @@ id: 587d7faa367417b2b2512bd6 title: Add a Tooltip to a D3 Element challengeType: 6 -videoUrl: '' -localeTitle: 将工具提示添加到D3元素 +forumTopicId: 301470 +localeTitle: 给 D3 元素添加工具提示 --- ## Description -
当用户将鼠标悬停在该项目上时，工具提示会显示有关页面上项目的更多信息。有几种方法可以向可视化添加工具提示，此挑战使用SVG title元素。 title对与text()方法一起动态地向条形图添加数据。
+
+当用户在一个对象上悬停时，提示框可以显示关于这个对象更多的信息。在可视化中有多种方法添加提示框，这个挑战将使用 SVG 的 title 元素。 +请使用 tile 和 text() 方法一起给每组动态添加数据。 +
## Instructions -
在每个rect节点下附加title元素。然后使用回调函数调用text()方法，以便文本显示数据值。
+
+在每个 rect 节点下面添加一个 title 元素，然后用回调函数调用 text() 方法使它的文本显示数据值。 +
## Tests
```yml tests: - - text: 您的代码应该有9个title元素。 + - text: 你应该有 9 个 title 元素。 testString: assert($('title').length == 9); - - text: 第一个title元素的工具提示文本应为12。 + - text: 第一个 title 元素的提示框文本应为 12。 testString: assert($('title').eq(0).text() == '12'); - - text: 第二个title元素的工具提示文本应为31。 + - text: 第二个 title 元素的提示框文本应为 31。 testString: assert($('title').eq(1).text() == '31'); - - text: 第三个title元素的工具提示文本应为22。 + - text: 第三个 title 元素的提示框文本应为 22。 testString: assert($('title').eq(2).text() == '22'); - - text: 第四个title元素的工具提示文本应为17。 + - text: 第四个 title 元素的提示框文本应为 17。 testString: assert($('title').eq(3).text() == '17'); - - text: 第五个title元素的工具提示文本应为25。 + - text: 第五个 title 元素的提示框文本应为 25。 testString: assert($('title').eq(4).text() == '25'); - - text: 第六个title元素的工具提示文本应为18。 + - text: 第六个 title 元素的提示框文本应为 18。 testString: assert($('title').eq(5).text() == '18'); - - text: 第七个title元素的工具提示文本应为29。 + - text: 第七个 title 元素的提示框文本应为 29。 testString: assert($('title').eq(6).text() == '29'); - - text: 第八个title元素的工具提示文本应为14。 + - text: 第八个 title 元素的提示框文本应为 14。 testString: assert($('title').eq(7).text() == '14'); - - text: 第九个title元素的工具提示文本应为9。 + - text: 第九个 title 元素的提示框文本应为 9。 testString: assert($('title').eq(8).text() == '9'); ``` @@ -75,11 +80,64 @@ tests: .attr("height", (d, i) => d * 3) .attr("fill", "navy") .attr("class", "bar") - // Add your code below this line + // 在下面添加你的代码 - // Add your code above this line + // 在上面添加你的代码 + + svg.selectAll("text") + .data(dataset) + .enter() + .append("text") + .text((d) => d) + .attr("x", (d, i) => i * 30) + .attr("y", (d, i) => h - (d * 3 + 3)) + + + +``` + + + + + +
+ +## Solution +
+ +```html + + + - ``` @@ -98,8 +104,42 @@ tests: ## Solution
-```js -// solution required +```html + + + + ``` -/section> +
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.chinese.md index 0534b5a217..3e1f8fa3c2 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.chinese.md @@ -2,26 +2,47 @@ id: 587d7fad367417b2b2512bdf title: Add Axes to a Visualization challengeType: 6 -videoUrl: '' -localeTitle: 将轴添加到可视化 +forumTopicId: 301472 +localeTitle: 添加坐标轴到可视化中 --- ## Description -
改善散点图的另一种方法是添加x轴和y轴。 D3有两种方法axisLeft()和axisBottom()分别渲染y轴和x轴。 （轴是轴的复数形式）。以下是在先前的挑战中基于xScale创建x轴的示例： const xAxis = d3.axisBottom(xScale);下一步是在SVG画布上渲染轴。为此，您可以使用常规SVG组件g元素。 g代表组。与rect ， circle和text ，轴在渲染时只是一条直线。因为它是一个简单的形状，使用g作品。最后一步是应用transform属性将轴定位在SVG画布上的正确位置。否则，该线将沿着SVG画布的边框渲染，并且不可见。 SVG支持不同类型的transforms ，但定位轴需要translate 。当它应用于g元素时，它会按给定的数量上下移动整个组。这是一个例子：
const xAxis = d3.axisBottom（xScale）;

svg.append（ “G”）
.attr（“transform”，“translate（0，”+（h - padding）+“）”）
.CALL（x-轴）;
上面的代码将x轴放在SVG画布的底部。然后它作为参数传递给call()方法。除了translate参数的形式为（x，0）之外，y轴的工作方式是相同的。因为translate是上面attr()方法中的字符串，所以可以使用连接来包含其参数的变量值。
+
+另一种改进散点图的方法是添加 x 轴和 y 轴。 +D3 有两种方法来渲染 y 轴和 x 轴，分别是 axisLeft 和 axisBottom。下面是一个基于上个挑战中的 xScale 创建 x 轴的例子： +const xAxis = d3.axisBottom(xScale); +下一步是在 SVG 画布上渲染 x 轴。为此，你可以使用一个常见的 SVG 组件， g 元素，g 是英文中组(group)的缩写。 +不同于 rect、circle、text，在渲染时，轴只是一条直线。因为它是一个简单的图形，所以可以用 g 。 +最后一步是使用 transforms 属性将轴放置在 SVG 画布的正确位置上。否则，轴将会沿着 SVG 画布的边缘渲染，从而不可见。 +SVG 支持多种 transforms，但是放置轴需要 translate。当它应用在 g 元素上时，它根据给出的总量移动整组。下面是一个例子： + +```js +const xAxis = d3.axisBottom(xScale); + +svg.append("g") + .attr("transform", "translate(0, " + (h - padding) + ")") + .call(xAxis); +``` + +上部分代码将 x 轴放置在 SVG 画布的底端。然后 x 轴作为参数被传递给 call 方法。 +除了 translate 的参数是 (x,0) 格式的，y 轴也是一样的。因为 translate 是上面 attr 方法中的一个字符串，你可以在参数中使用字符串的连接将变量值包括进去。 +
## Instructions -
散点图现在具有x轴。使用axisLeft()方法在名为yAxis的变量中创建y轴。然后使用g元素渲染轴。确保使用transform属性将轴转换为右边的填充单元数量，然后降低0个单位。记得call()轴。
+
+现在散点图有 x 轴了。用 axisLeft 方法在变量 yAxis 中创建 y 轴，然后用 g 元素渲染 y 轴。确保用 transform 属性将 y 轴向右平移 padding 个单位，向下平移 0 个单位。记得 call() y 轴。 +
## Tests
```yml tests: - - text: 您的代码应使用axisLeft()方法， yScale作为参数传递。 + - text: 你应该使用参数为 yScale的axisLeft() 方法。 testString: assert(code.match(/\.axisLeft\(yScale\)/g)); - - text: 'y轴g元素应具有transform属性以将轴平移（60,0）。' + - text: y 轴的 g元素应该有一个transform 属性来将 y 轴平移( 60，0 )。 testString: assert($('g').eq(10).attr('transform').match(/translate\(60\s*?,\s*?0\)/g)); - - text: 您的代码应该调用yAxis 。 + - text: 你应该调用(call) yAxis 。 testString: assert(code.match(/\.call\(\s*yAxis\s*\)/g)); ``` @@ -83,23 +104,19 @@ tests: .attr("y", (d) => yScale(d[1])) const xAxis = d3.axisBottom(xScale); - // Add your code below this line - const yAxis = undefined; - // Add your code above this line svg.append("g") .attr("transform", "translate(0," + (h - padding) + ")") .call(xAxis); - // Add your code below this line + // 在下面添加你的代码 - // Add your code above this line + // 在上面添加你的代码 - ``` @@ -111,8 +128,71 @@ tests: ## Solution
-```js -// solution required +```html + + + + ``` -/section> +
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.chinese.md index d8817dd93b..ccf713082f 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.chinese.md @@ -2,24 +2,31 @@ id: 587d7fa7367417b2b2512bc8 title: Add Classes with D3 challengeType: 6 -videoUrl: '' -localeTitle: 使用D3添加类 +forumTopicId: 301473 +localeTitle: 用 D3 添加 Class --- ## Description -
即使对于较小的应用程序，在HTML元素上使用大量内联样式也很难管理。使用CSS规则将类添加到元素和样式一次更容易。 D3具有attr()方法，可以向元素添加任何HTML属性，包括类名。 attr()方法的工作方式与style()工作方式相同。它采用逗号分隔值，并可以使用回调函数。这是一个向选择中添加“容器”类的示例： selection.attr("class", "container");
+
+即使对小型 app 来说在 HTML 元素中大量使用内联样式表也十分难以管理。更方便的是给元素添加遵守 CSS 规则的类。D3 中的 attr() 方法可以给元素添加任何 HTML 属性，包括类名称。 +attr() 方法和 style() 的使用方法一样。它以逗号分隔的键值对为参数使用回调函数。这里是一个给选中元素添加类名为 "container" 的例子：selection.attr("class", "container"); + +注意当 "container" 元素改变或者添加一个 class 时，"class" 参数会保持不变。 +
## Instructions -
将attr()方法添加到编辑器中的代码中，并在div元素上添加一个bar类。
+
+在编辑器中添加 attr() 方法，给 div 元素添加类名 bar。 +
## Tests
```yml tests: - - text: 你的div元素应该有一类bar 。 + - text: 你的 div元素应该有一个bar 类。 testString: assert($('div').attr('class') == "bar"); - - text: 您的代码应使用attr()方法。 + - text: 你应该使用 attr() 方法。 testString: assert(code.match(/\.attr/g)); ``` @@ -48,14 +55,13 @@ tests: .data(dataset) .enter() .append("div") - // Add your code below this line + // 在下面添加你的代码 - // Add your code above this line + // 在上面添加你的代码 - ``` @@ -67,8 +73,28 @@ tests: ## Solution
-```js -// solution required +```html + + + + ``` -/section> +
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.chinese.md index e82eda1144..8a1f0bdf40 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.chinese.md @@ -2,32 +2,51 @@ id: 587d7fa6367417b2b2512bc2 title: Add Document Elements with D3 challengeType: 6 -videoUrl: '' -localeTitle: 使用D3添加文档元素 +forumTopicId: 301474 +localeTitle: 用 D3 给文档添加元素 --- ## Description -
D3有几种方法可以让您在文档中添加和更改元素。 select()方法从文档中选择一个元素。它接受所需元素名称的参数，并返回文档中与名称匹配的第一个元素的HTML节点。这是一个例子： const anchor = d3.select("a");上面的示例在页面上查找第一个锚标记，并在变量anchor为其保存HTML节点。您可以使用其他方法进行选择。示例的“d3”部分是对D3对象的引用，这是您访问D3方法的方式。另外两个有用的方法是append()和text() 。 append()方法为要添加到文档的元素接受参数。它将HTML节点附加到选定项目，并返回该节点的句柄。 text()方法可以设置所选节点的文本，也可以获取当前文本。要设置该值，请在方法的括号内传递一个字符串作为参数。这是一个选择无序列表，附加列表项和添加文本的示例：
d3.select（ “UL”）
.append（ “里”）
.text（“非常重要的项目”）;
D3允许您将多个方法与句点链接在一起以连续执行多个操作。
+
+D3 有多种方法可以用来在文档中增加元素、修改元素。 +select() 方法用来从文档中选择元素，它以你查询的元素名称作为参数，返回第一个符合条件的 HTML 节点。以下是一个例子： +const anchor = d3.select("a"); +上面这个例子找到页面上的第一个 a 标签（锚标签），将它作为一个 HTML 节点保存在变量 anchor 中。你也可以用其他的方法选择页面上的元素。例子中的 "d3" 是对 D3 对象的引用，可以通过它来访问 D3 的方法。 +还可以用 append() 和 text() 方法。 +append() 方法以你想添加到文档中的元素作为参数，给选中的元素添加一个 HTML 节点，返回那个节点的句柄。 +text() 方法既可以给节点设置新的文本，也可以获取节点的当前文本。 如果要设置文字内容，需要在圆括号中传入一个 string（字符串）类型的参数。 +下面是一个选择无序列表、添加列表项和文字的例子： + +```js +d3.select("ul") + .append("li") + .text("Very important item"); +``` + +在 D3 中可以使用英文句号将多个方法串联在一起执行多个操作。 +
## Instructions -
使用select方法选择文档中的body标签。然后为其append一个h1标签，并将文本“Learning D3”添加到h1元素中。
+
+使用 select 方法选择文本中的 body 标签。然后用 append 方法为它添加一个 h1 标签，同时在 h1 中添加文本 "Learning D3"。 +
## Tests
```yml tests: - - text: body应该有一个h1元素。 + - text: 你的 body 元素应该包含元素 h1。 testString: assert($('body').children('h1').length == 1); - - text: h1元素应该包含文本“Learning D3”。 + - text: "你的 h1 元素应该包含文本 'Learning D3'。" testString: assert($('h1').text() == "Learning D3"); - - text: 您的代码应该访问d3对象。 + - text: 你应该能访问 d3 的对象。 testString: assert(code.match(/d3/g)); - - text: 您的代码应该使用select方法。 + - text: 你应该使用 select 方法。 testString: assert(code.match(/\.select/g)); - - text: 您的代码应该使用append方法。 + - text: 你应该使用 append 方法。 testString: assert(code.match(/\.append/g)); - - text: 您的代码应该使用text方法。 + - text: 你应该使用 text 方法。 testString: assert(code.match(/\.text/g)); ``` @@ -42,14 +61,13 @@ tests: ```html - ``` @@ -61,8 +79,14 @@ tests: ## Solution
-```js -// solution required +```html + + + ``` -/section> +
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.chinese.md index 0ae497aa8f..7d3a7477e5 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.chinese.md @@ -2,24 +2,30 @@ id: 587d7fa7367417b2b2512bc6 title: Add Inline Styling to Elements challengeType: 6 -videoUrl: '' -localeTitle: 向元素添加内联样式 +forumTopicId: 301475 +localeTitle: 给元素添加内联样式 --- ## Description -
D3允许您使用style()方法在动态元素上添加内联CSS样式。 style()方法将逗号分隔的键值对作为参数。这是一个将选择的文本颜色设置为蓝色的示例： selection.style("color","blue");
+
+D3 可以使用 style() 方法为动态元素添加内联 CSS 样式表。 +style() 方法以用逗号分隔的键值对作为参数。这里是一个将选中文本的颜色设为蓝色的例子： +selection.style("color","blue"); +
## Instructions -
将style()方法添加到编辑器中的代码中，使所有显示的文本都具有verdana的font-family 。
+
+在编辑器中添加 style() 方法，使所有显示的文本的 font-family 为 verdana。 +
## Tests
```yml tests: - - text: 你的h2元素应该有verdana的font-family 。 + - text: 你的 h2 元素的 font-family 应该为 verdana。 testString: assert($('h2').css('font-family') == 'verdana'); - - text: 您的代码应使用style()方法。 + - text: 你应该使用 style() 方法。 testString: assert(code.match(/\.style/g)); ``` @@ -41,14 +47,13 @@ tests: .enter() .append("h2") .text((d) => (d + " USD")) - // Add your code below this line + // 在下面添加你的代码 - // Add your code above this line + // 在上面添加你的代码 - ``` @@ -60,8 +65,21 @@ tests: ## Solution
-```js -// solution required +```html + + + + ``` -/section> +
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.chinese.md index 56e1034967..cb5797594f 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.chinese.md @@ -2,38 +2,45 @@ id: 587d7faa367417b2b2512bd2 title: Add Labels to D3 Elements challengeType: 6 -videoUrl: '' -localeTitle: 将标签添加到D3元素 +forumTopicId: 301476 +localeTitle: 给 D3 元素添加标签 --- ## Description -
D3允许您使用SVG text元素标记图形元素，例如条形图。与rect元素一样， text元素需要具有x和y属性，以将其放在SVG画布上。它还需要访问数据以显示这些值。 D3让您可以高度控制标杆的标注方式。
+
+D3 允许使用 SVG 的 text 元素给图形元素贴标签，例如给条形图中的各组都贴上标签。 +和 rect 元素类似，text 元素也需要 x 和 y 属性来指定其放置在 SVG 画布上的位置，它也需要能够获取数据来显示数据值。 +关于如何给组贴标签，D3 给了你很高的控制权。 +
## Instructions -
编辑器中的代码已将数据绑定到每个新text元素。首先，将text节点附加到svg 。接下来，添加x和y坐标的属性。应该以与rect相同的方式计算它们，除了text的y值应该使标签比条形高3个单位。最后，使用D3 text()方法将标签设置为等于数据点值。 注意
对于标签比坐吧较高，决定是否y为值text应比少3个或大或3 y了吧价值。
+
+编辑器中的代码已经将数据绑定到每个新的 text 元素。首先，在 svg 中添加 text 节点。然后，添加 x 和 y 坐标属性，除了 text 的 y 值应该使标签比组的高 y 3 个单位，其余值的计算方法应该和 rect 中计算方法一样。最后，用 D3 的 text() 方法将标签的文本设置为和数据点相等的值。 +提示
关于标签比组高，想一想 text 的 y 值应该比组的 y 值大 3 还是小 3。 +
## Tests
```yml tests: - - text: 第一个text元素的标签应为12， y值应为61。 + - text: 第一个 text 元素应该有一个值为 12 的标签并且 y 值为 61。 testString: assert($('text').eq(0).text() == '12' && $('text').eq(0).attr('y') == '61'); - - text: 第二个text元素的标签应为31， y值应为4。 + - text: 第二个 text 元素应该有一个值为 31 的标签并且 y 值为 4。 testString: assert($('text').eq(1).text() == '31' && $('text').eq(1).attr('y') == '4'); - - text: 第三个text元素的标签应为22， y值应为31。 + - text: 第三个 text 元素应该有一个值为 22 的标签并且 y 值为 31。 testString: assert($('text').eq(2).text() == '22' && $('text').eq(2).attr('y') == '31'); - - text: 第四个text元素的标签应为17， y值应为46。 + - text: 第四个 text 元素应该有一个值为 17 的标签并且 y 值为 46。 testString: assert($('text').eq(3).text() == '17' && $('text').eq(3).attr('y') == '46'); - - text: 第五个text元素的标签应为25， y值应为22。 + - text: 第五个 text 元素应该有一个值为 25 的标签并且 y 值为 22。 testString: assert($('text').eq(4).text() == '25' && $('text').eq(4).attr('y') == '22'); - - text: 第六个text元素的标签应为18， y值应为43。 + - text: 第六个 text 元素应该有一个值为 18 的标签并且 y 值为 43。 testString: assert($('text').eq(5).text() == '18' && $('text').eq(5).attr('y') == '43'); - - text: 第七个text元素的标签应为29， y值应为10。 + - text: 第七个 text 元素应该有一个值为 29 的标签并且 y 值为 10。 testString: assert($('text').eq(6).text() == '29' && $('text').eq(6).attr('y') == '10'); - - text: 第八个text元素的标签应为14， y值应为55。 + - text: 第八个 text 元素应该有一个值为 14 的标签并且 y 值为 55。 testString: assert($('text').eq(7).text() == '14' && $('text').eq(7).attr('y') == '55'); - - text: 第九个text元素的标签应为9， y值应为70。 + - text: 第九个 text 元素应该有一个值为 9 的标签并且 y 值为 70。 testString: assert($('text').eq(8).text() == '9' && $('text').eq(8).attr('y') == '70'); ``` @@ -71,15 +78,14 @@ tests: svg.selectAll("text") .data(dataset) .enter() - // Add your code below this line + // 在下面添加你的代码 - // Add your code above this line + // 在上面添加你的代码 - ``` @@ -92,7 +98,38 @@ tests:
```js -// solution required + + + + ``` -/section> +
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.chinese.md index 7838b1c887..11d6faeded 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.chinese.md @@ -2,42 +2,48 @@ id: 587d7fab367417b2b2512bd9 title: Add Labels to Scatter Plot Circles challengeType: 6 -videoUrl: '' -localeTitle: 添加标签以分散绘图圆圈 +forumTopicId: 301477 +localeTitle: 向散点图的 Circles 添加标签 --- ## Description -
您可以添加文本以在散点图中为点创建标签。目标是显示dataset每个项目的第一个（ x ）和第二个（ y ）字段的逗号分隔值。 text节点需要x和y属性才能将其放置在SVG画布上。在此挑战中， y值（确定高度）可以使用circle用于其cy属性的相同值。 x值可能略大于circle的cx值，因此标签可见。这会将标签推到绘图点的右侧。
+
+你可以添加文本为散点图中的点创建标签。 +目标是显示以逗号分隔的值，分别为 dataset 中每个对象的第一个(x)和第二个(y)字段 +text 节点需要 x 和 y 属性来指定放置在 SVG 画布中的位置。在这个挑战中，y 值（决定高度）可以用和 circle 的 cy 属性相同的值，x 值可以比 circle 的 cx 值稍微大一些，这样标签才是可见的并且被放置在散点的右边。 +
## Instructions -
使用text元素标记散点图上的每个点。标签的文本应该是用逗号和空格分隔的两个值。例如，第一个点的标签是“34,78”。设置x属性，使其比circle上cx属性使用的值多5个单位。设置y属性的方式与circle上的cy值相同。
+
+用 text 元素为散点图中的每个点创建标签。标签的文本应该为用一个逗号和一个空格分隔开的两个值，例如，第一个点的标签为 "34, 78"。设置 x 属性比 circle 的 cx 属性大 5 个单位，设置 y 属性和 circle 的 cy 属性相同。 +
## Tests
```yml tests: - - text: 您的代码应该有10个text元素。 + - text: 你应该有 10 个 text 元素。 testString: assert($('text').length == 10); - - text: '第一个标签的文本应为“34,78”， x值为39， y值为422。' + - text: "第一个标签的文本应该为 '34, 78'， x 值应该为 39， y 应该为 422。" testString: assert($('text').eq(0).text() == '34, 78' && $('text').eq(0).attr('x') == '39' && $('text').eq(0).attr('y') == '422'); - - text: '第二个标签的文本应为“109,280”， x值为114， y值为220。' + - text: "第二个标签的文本应该为 '109, 280'， x 值应该为 114， y 应该为 220。" testString: assert($('text').eq(1).text() == '109, 280' && $('text').eq(1).attr('x') == '114' && $('text').eq(1).attr('y') == '220'); - - text: '第三个标签的文本应为“310,120”， x值为315， y值为380。' + - text: "第三个标签的文本应该为 '310, 120'， x 值应该为 315， y 应该为 380。" testString: assert($('text').eq(2).text() == '310, 120' && $('text').eq(2).attr('x') == '315' && $('text').eq(2).attr('y') == '380'); - - text: '第四个标签的文本应为“79,411”， x值为84， y值为89。' + - text: "第四个标签的文本应该为 '79, 411'， x 值应该为 84， y 应该为 89。" testString: assert($('text').eq(3).text() == '79, 411' && $('text').eq(3).attr('x') == '84' && $('text').eq(3).attr('y') == '89'); - - text: '第五个标签的文本应为“420,220”， x值为425， y值为280。' + - text: "第五个标签的文本应该为 '420, 220'， x 值应该为 425， y 应该为 280。" testString: assert($('text').eq(4).text() == '420, 220' && $('text').eq(4).attr('x') == '425' && $('text').eq(4).attr('y') == '280'); - - text: '第六个标签的文本应为“233,145”， x值为238， y值为355。' + - text: "第六个标签的文本应该为 '233, 145'， x 值应该为 238， y 应该为 355。" testString: assert($('text').eq(5).text() == '233, 145' && $('text').eq(5).attr('x') == '238' && $('text').eq(5).attr('y') == '355'); - - text: '第七个标签的文本应为“333,96”， x值为338， y值为404。' + - text: "第七个标签的文本应该为 '333, 96'， x 值应该为 338， y 应该为 404。" testString: assert($('text').eq(6).text() == '333, 96' && $('text').eq(6).attr('x') == '338' && $('text').eq(6).attr('y') == '404'); - - text: '第八个标签的文本应为“222,333”， x值为227， y值为167。' + - text: "第八个标签的文本应该为 '222, 333'， x 值应该为 227， y 应该为 167。" testString: assert($('text').eq(7).text() == '222, 333' && $('text').eq(7).attr('x') == '227' && $('text').eq(7).attr('y') == '167'); - - text: '第九个标签的文本应为“78,320”， x值为83， y值为180。' + - text: "第九个标签的文本应该为 '78, 320'， x 值应该为 83， y 应该为 180。" testString: assert($('text').eq(8).text() == '78, 320' && $('text').eq(8).attr('x') == '83' && $('text').eq(8).attr('y') == '180'); - - text: '第十个标签的文本应为“21,123”， x值为26， y值为377。' + - text: "第十个标签的文本应该为 '21, 123'， x 值应该为 26， y 应该为 377。" testString: assert($('text').eq(9).text() == '21, 123' && $('text').eq(9).attr('x') == '26' && $('text').eq(9).attr('y') == '377'); ``` @@ -86,14 +92,13 @@ tests: .data(dataset) .enter() .append("text") - // Add your code below this line + // 在下面添加你的代码 - // Add your code above this line + // 在上面添加你的代码 - ``` @@ -105,8 +110,50 @@ tests: ## Solution
-```js -// solution required +```html + + + + ``` -/section> +
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.chinese.md index 99f63573bc..d32a09a2db 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.chinese.md @@ -2,38 +2,52 @@ id: 587d7fa7367417b2b2512bc7 title: Change Styles Based on Data challengeType: 6 -videoUrl: '' +forumTopicId: 301479 localeTitle: 根据数据更改样式 --- ## Description -
D3是关于数据的可视化和呈现。您可能希望根据数据更改元素的样式。您可以在style()方法中使用回调函数来更改不同元素的样式。例如，如果值小于20，您可能希望将数据点着色为蓝色，否则为红色。您可以在style()方法中使用回调函数并包含条件逻辑。回调函数使用d参数表示数据点：
selection.style（“color”，（d）=> {
/ *根据条件返回颜色的逻辑* /
}）;
style()方法不仅限于设置color - 它也可以与其他CSS属性一起使用。
+
+D3 是关于可视化和展示数据的。如果你期望基于数据来改变元素的样式，你可以在 style() 方法中使用回调函数为不同元素改变样式。 +例如，你想将值小于 20 的数据点设置为蓝色，其余设置为红色。你可以在 style() 方法中使用包含条件逻辑的回调函数。回调函数以 d 作为参数来表示一个数据点： + +```js +selection.style("color", (d) => { + /* Logic that returns the color based on a condition */ +}); +``` + +style() 方法不仅仅可以设置 color——它也适用于其他 CSS 属性。 +
## Instructions -
将style()方法添加到编辑器中的代码，以有条件地设置h2元素的color 。写回调函数，如果数据值小于20，则返回“red”，否则返回“green”。 注意
您可以使用if-else逻辑或三元运算符。
+
+在编辑器中添加 style() 方法，根据条件设置 h2 元素的 color 属性。写一个回调函数，如果值小于 20 返回 "red"，否则返回 "green"。 +提示
你可以使用 if-else 语句或者三目操作符。 +
## Tests
```yml tests: - - text: 第一h2应该有一个color的红色。 + - text: 第一个 h2 的 color 应该为 red。 testString: assert($('h2').eq(0).css('color') == "rgb(255, 0, 0)"); - - text: 第二h2应该有一个color的绿色。 + - text: 第二个 h2 的 color 应该为 green。 testString: assert($('h2').eq(1).css('color') == "rgb(0, 128, 0)"); - - text: 第三h2应该有一个color的绿色。 + - text: 第三个 h2 的 color 应该为 green。 testString: assert($('h2').eq(2).css('color') == "rgb(0, 128, 0)"); - - text: 第四h2应该有一个color的红色。 + - text: 第四个 h2 的 color 应该为 red。 testString: assert($('h2').eq(3).css('color') == "rgb(255, 0, 0)"); - - text: 第五h2应该有一个color的绿色。 + - text: 第五个 h2 的 color 应该为 green。 testString: assert($('h2').eq(4).css('color') == "rgb(0, 128, 0)"); - - text: 第六h2应该有一个color的红色。 + - text: 第六个 h2 的 color 应该为 red。 testString: assert($('h2').eq(5).css('color') == "rgb(255, 0, 0)"); - - text: 第七h2应该有一个color的绿色。 + - text: 第七个 h2 的 color 应该为 green。 testString: assert($('h2').eq(6).css('color') == "rgb(0, 128, 0)"); - - text: 第八h2应该有一个color的红色。 + - text: 第八个 h2 的 color 应该为 red。 testString: assert($('h2').eq(7).css('color') == "rgb(255, 0, 0)"); - - text: 第九h2应该有一个color的红色。 + - text: 第九个 h2 的 color 应该为 red。 testString: assert($('h2').eq(8).css('color') == "rgb(255, 0, 0)"); ``` @@ -55,14 +69,13 @@ tests: .enter() .append("h2") .text((d) => (d + " USD")) - // Add your code below this line + // 在下面添加你的代码 - // Add your code above this line + // 在上面添加你的代码 - ``` @@ -74,8 +87,20 @@ tests: ## Solution
-```js -// solution required +```html + + + + ``` -/section> +
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element.chinese.md index c8d65de4a1..7e8a6587b9 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element.chinese.md @@ -2,22 +2,27 @@ id: 587d7fa9367417b2b2512bd1 title: Change the Color of an SVG Element challengeType: 6 -videoUrl: '' -localeTitle: 更改SVG元素的颜色 +forumTopicId: 301480 +localeTitle: 更改 SVG 元素的颜色 --- ## Description -
条形图位于正确的位置，但它们都是相同的黑色。 SVG有办法改变条形的颜色。在SVG中， rect形状使用fill属性着色。它支持十六进制代码，颜色名称和rgb值，以及更复杂的选项，如渐变和透明度。
+
+所有组都在正确的位置上了，但是它们都是一样的黑色。SVG 可以改变组的颜色。 +在 SVG 中， rect 图形用 fill 属性着色，它支持十六进制代码、颜色名称、rgb 值以及更复杂的选项，比如渐变和透明。 +
## Instructions -
添加attr()方法将所有条形的“填充”设置为颜色“海军蓝”。
+
+添加 attr() 方法，将所有组的 "fill" 设置为 "navy"。 +
## Tests
```yml tests: - - text: 这些酒吧都应该有海军蓝的fill颜色。 + - text: 所有组的 fill 颜色都应该是 navy。 testString: assert($('rect').css('fill') == "rgb(0, 0, 128)"); ``` @@ -50,14 +55,13 @@ tests: .attr("y", (d, i) => h - 3 * d) .attr("width", 25) .attr("height", (d, i) => 3 * d) - // Add your code below this line + // 在下面添加你的代码 - // Add your code above this line + // 在上面添加你的代码 - ``` @@ -69,8 +73,32 @@ tests: ## Solution
-```js -// solution required +```html + + + + ``` -/section> +
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.chinese.md index 478add552b..a053b8ff05 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.chinese.md @@ -2,38 +2,45 @@ id: 587d7fa8367417b2b2512bca title: Change the Presentation of a Bar Chart challengeType: 6 -videoUrl: '' -localeTitle: 更改条形图的演示文稿 +forumTopicId: 301481 +localeTitle: 更改条形图的显示方式 --- ## Description -
最后一个挑战创建了一个条形图，但有几个格式更改可以改善它：1）在每个条之间添加空格以在视觉上分隔它们，这是通过为bar类添加边距来完成的2）增加条形的高度可以更好地显示值的差异，这可以通过将值乘以数字来缩放高度来完成
+
+这里有一些格式的改变可以美化上个挑战中创建的条形图： +1) 通过在 CSS 中为 bar 的类添加 margin 属性，为每一组之间添加空格以直观的将它们分开 +2) 通过给每个值乘以一个数来缩放高度，增加高度以更好地显示值的差异 +
## Instructions -
首先，在style标记的bar类中添加2px的margin 。接下来，更改style()方法中的回调函数，使其返回原始数据值的10倍（加上“px”）。 注意
将每个数据点乘以相同的常数只会改变比例。它就像放大一样，并没有改变底层数据的含义。
+
+首先，在 style 标签中为 bar 类添加 2px 的 margin 属性。然后，在 style() 方法中修改回调函数，使它返回 10 倍原数值的值（在后面加上 "px"）。 +提示
通过给每一个数值点乘以相同的常量值仅仅改变比例。这就像放大，它不会改变底层数据的含义。 +
## Tests
```yml tests: - - text: 第一个div的height应为120像素， margin为2像素。 + - text: 第一个 div 的 height 应该为 120 个像素，margin 应该为 2 个像素。 testString: assert($('div').eq(0).css('height') == '120px' && $('div').eq(0).css('margin-right') == '2px'); - - text: 第二个div的height应为310像素， margin为2像素。 + - text: 第二个 div 的 height 应该为 310 个像素，margin 应该为 2 个像素。 testString: assert($('div').eq(1).css('height') == '310px' && $('div').eq(1).css('margin-right') == '2px'); - - text: 第三个div的height应为220像素， margin为2像素。 + - text: 第三个 div 的 height 应该为 220 个像素，margin 应该为 2 个像素。 testString: assert($('div').eq(2).css('height') == '220px' && $('div').eq(2).css('margin-right') == '2px'); - - text: 第四个div的height应为170像素， margin为2像素。 + - text: 第四个 div 的 height 应该为 170 个像素，margin 应该为 2 个像素。 testString: assert($('div').eq(3).css('height') == '170px' && $('div').eq(3).css('margin-right') == '2px'); - - text: 第五个div的height应为250像素， margin为2像素。 + - text: 第五个 div 的 height 应该为 250 个像素，margin 应该为 2 个像素。 testString: assert($('div').eq(4).css('height') == '250px' && $('div').eq(4).css('margin-right') == '2px'); - - text: 第六个div的height应为180像素， margin为2像素。 + - text: 第六个 div 的 height 应该为 180 个像素，margin 应该为 2 个像素。 testString: assert($('div').eq(5).css('height') == '180px' && $('div').eq(5).css('margin-right') == '2px'); - - text: 第七个div的height应为290像素， margin为2像素。 + - text: 第七个 div 的 height 应该为 290 个像素，margin 应该为 2 个像素。 testString: assert($('div').eq(6).css('height') == '290px' && $('div').eq(6).css('margin-right') == '2px'); - - text: 第八个div的height应为140像素， margin为2像素。 + - text: 第八个 div 的 height 应该为 140 个像素，margin 应该为 2 个像素。 testString: assert($('div').eq(7).css('height') == '140px' && $('div').eq(7).css('margin-right') == '2px'); - - text: 第九个div的height应为90像素， margin为2像素。 + - text: 第九个 div 的 height 应该为 90 个像素，margin 应该为 2 个像素。 testString: assert($('div').eq(8).css('height') == '90px' && $('div').eq(8).css('margin-right') == '2px'); ``` @@ -50,9 +57,9 @@ tests: .bar { width: 25px; height: 100px; - /* Add your code below this line */ + /* 在下面添加你的代码 */ - /* Add your code above this line */ + /* 在上面添加你的代码 */ display: inline-block; background-color: blue; } @@ -66,13 +73,9 @@ tests: .enter() .append("div") .attr("class", "bar") - // Add your code below this line .style("height", (d) => (d + "px")) - - // Add your code above this line - ``` @@ -84,8 +87,29 @@ tests: ## Solution
-```js -// solution required +```html + + + + + ``` -/section> +
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.chinese.md index 683409aac3..24e5b62d06 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.chinese.md @@ -2,28 +2,42 @@ id: 587d7fa8367417b2b2512bcd title: Create a Bar for Each Data Point in the Set challengeType: 6 -videoUrl: '' -localeTitle: 为集合中的每个数据点创建一个条 +forumTopicId: 301482 +localeTitle: 为集合中的每个数据点创建一个 Bar --- ## Description -
最后一个挑战只在svg元素中添加了一个矩形来表示一个条形。在这里，您将结合您迄今为止学习的有关data() ， enter()和SVG形状的内容，为数据dataset每个数据点创建和附加一个矩形。之前的挑战显示了如何为dataset每个项目创建和附加div的格式：
d3.select（ “身体”）。全选（ “分区”）
。数据（数据集）
。输入（）
.append（ “分区”）
使用rect元素而不是divs有一些差异。 rects必须附加到svg元素，而不是直接附加到body 。此外，您需要告诉D3在svg区域内放置每个rect位置。酒吧安置将在下一个挑战中涵盖。
+
+上个挑战仅仅在 svg 中添加了一个矩形来表示一组。接下来你将结合到目前为止所学的关于 data()、enter()、SVG 图形的知识，为 dataset 中的每一个数据点创建并且添加一个矩形。 +之前的挑战展示了如何为 dataset 中的每个对象创建并添加一个 div： + +```js +d3.select("body").selectAll("div") + .data(dataset) + .enter() + .append("div") +``` + +rect 元素和 div 有一些不同，rect 必须添加在 svg 元素内，而不能直接添加在 body 内。同时，你需要告诉 D3 将 rect 放在 svg 区域的哪个位置。组的放置会在下一个挑战中讲到。 +
## Instructions -
使用data() ， enter()和append()方法为dataset每个项创建和附加rect 。条形图应该全部显示在一起，这将在下一个挑战中修复。
+
+用 data()、enter()、append() 方法为 dataset 中的每一个对象创建并添加一个 rect 。每一组都将直接显示在上一组的上面，将上一组覆盖，这将会在下一个挑战中得到修改。 +
## Tests
```yml tests: - - text: 您的文档应该有9个rect元素。 + - text: 你的文档应该有 9 个 rect 元素。 testString: assert($('rect').length == 9); - - text: 您的代码应该使用data()方法。 + - text: 你应该使用 data() 方法。 testString: assert(code.match(/\.data/g)); - - text: 您的代码应使用enter()方法。 + - text: 你应该使用 enter() 方法。 testString: assert(code.match(/\.enter/g)); - - text: 您的代码应使用append()方法。 + - text: 你应该使用 append() 方法。 testString: assert(code.match(/\.append/g)); ``` @@ -49,18 +63,17 @@ tests: .attr("height", h); svg.selectAll("rect") - // Add your code below this line + // 在下面添加你的代码 - // Add your code above this line + // 在上面添加你的代码 .attr("x", 0) .attr("y", 0) .attr("width", 25) .attr("height", 100); - ``` @@ -72,8 +85,30 @@ tests: ## Solution
-```js -// solution required +```html + + + + ``` -/section> +
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.chinese.md index 7fbdcc82e0..ba3a5d5179 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.chinese.md @@ -2,26 +2,36 @@ id: 587d7fab367417b2b2512bda title: Create a Linear Scale with D3 challengeType: 6 -videoUrl: '' -localeTitle: 使用D3创建线性比例 +forumTopicId: 301483 +localeTitle: 用 D3 创建线性比例 --- ## Description -
条形图和散点图图表都将数据直接绘制到SVG画布上。但是，如果条形或其中一个数据点的高度大于SVG高度或宽度值，则它将超出SVG区域。在D3中，有一些比例可以帮助绘制数据。 Scales是告诉程序如何将一组原始数据点映射到SVG画布的像素上的函数。例如，假设您有一个100x500大小的SVG画布，并且您想绘制许多国家的国内生产总值（GDP）。这组数字将在数十亿或万亿美元的范围内。您提供D3一种比例来告诉它如何将大的GDP值放入100x500大小的区域。您不太可能按原样绘制原始数据。在绘制之前，您可以设置整个数据集的比例，以便x和y值适合您的画布宽度和高度。 D3有几种比例类型。对于线性标度（通常与定量数据一起使用），有D3方法scaleLinear() ： const scale = d3.scaleLinear()默认情况下，标度使用标识关系。输入的值与输出的值相同。单独的挑战包括如何改变这一点。
+
+条形图和散点图都直接在 SVG 画布上绘制数据。但是，如果一组的高或者其中一个数据点比 SVG 的高或宽更大，它将跑到 SVG 区域外。 +D3 中，比例尺可帮助布局数据。 Scales 是告诉程序如何将一组原始数据点映射到 SVG 画布上像素的函数。 +例如，假设你有一个 100x500 大小的 SVG 画布，你想为许多国家绘制国内生产总值(GDP)的图表。这组数据将在十亿美元或万亿美元的范围内。你给 D3 提供一种缩放方法告诉它如何将大的 GDP 值放置在 100x500 大小的区域。 +你不太可能按原样绘制原始数据，在绘制之前，将整个数据集缩放，这样 x 和 y 值才适合你画布的宽高。 +D3 有几种缩放类型。对于线性缩放（通常使用于定量数据），使用 D3 的 scaleLinear() 方法： + const scale = d3.scaleLinear() +默认情况下，比例尺使用一比一的比例，输出的值和输入的值相同。在后面的章节中将涉及如何改变默认比例。 +
## Instructions -
更改scale变量以创建线性比例。然后将output变量设置为使用输入参数50调用的比例。
+
+改变 scale 变量的值创建线性缩放，然后将 output 变量设置为 scale 函数（参数为 50）。 +
## Tests
```yml tests: - - text: h2的文本应为50。 + - text: h2 的文本应该为 50。 testString: assert($('h2').text() == '50'); - - text: 您的代码应使用scaleLinear()方法。 + - text: 你应该使用 scaleLinear 方法。 testString: assert(code.match(/\.scaleLinear/g)); - - text: output变量应该使用参数50调用scale 。 + - text: output 变量应该调用输入参数为 50 的 scale 的值。 testString: assert(output == 50 && code.match(/scale\(\s*?50\s*?\)/g)); ``` @@ -36,12 +46,12 @@ tests: ```html - ``` @@ -61,8 +70,20 @@ tests: ## Solution
-```js -// solution required +```html + + + + ``` -/section> +
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.chinese.md index 514294ee55..b5b4de4d32 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.chinese.md @@ -2,22 +2,28 @@ id: 587d7fab367417b2b2512bd7 title: Create a Scatterplot with SVG Circles challengeType: 6 -videoUrl: '' -localeTitle: 使用SVG圈创建散点图 +forumTopicId: 301484 +localeTitle: 使用 SVG Circles 创建散点图 --- ## Description -
散点图是另一种可视化。它通常使用圆来映射数据点，每个数据点都有两个值。这些值与x和y轴相关联，用于在可视化中定位圆。 SVG有一个circle标记来创建圆形。它的工作方式与条形图中使用的rect元素非常相似。
+
+散点图是另一种形式的可视化。它用圆圈来映射数据点，每个数据点有两个值，这两个值和 x 和 y 轴相关联，在可视化中用来给圆圈定位。 +SVG 用 circle 标签来创建圆形，它和之前用来构建条形图的 rect 非常相像。 +
## Instructions -
使用data() ， enter()和append()方法将dataset绑定到附加到SVG画布的新circle元素。 注意
圆圈将不可见，因为我们尚未设置其属性。我们将在下一次挑战中做到这一点。
+
+使用 data()、enter()、append() 方法将 dataset 和新添加到 SVG 画布上的 circle 元素绑定起来。 +注意
circles 并不可见，因为我们还没有设置它们的属性。我们会在下一个挑战来设置它。 +
## Tests
```yml tests: - - text: 您的代码应该有10个circle元素。 + - text: 你应该有 10 个 circle 元素。 testString: assert($('circle').length == 10); ``` @@ -55,15 +61,14 @@ tests: .attr("height", h); svg.selectAll("circle") - // Add your code below this line + // 在下面添加你的代码 - // Add your code above this line + // 在上面添加你的代码 - ``` @@ -75,8 +80,39 @@ tests: ## Solution
-```js -// solution required +```html + + + + ``` -/section> +
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.chinese.md index 8a0bf40ecc..44842496dc 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.chinese.md @@ -2,30 +2,38 @@ id: 587d7fa8367417b2b2512bcc title: Display Shapes with SVG challengeType: 6 -videoUrl: '' -localeTitle: 使用SVG显示形状 +forumTopicId: 301485 +localeTitle: 用 SVG 显示形状 --- ## Description -
最后一个挑战创建了一个具有给定宽度和高度的svg元素，这是可见的，因为它在style标记中应用了background-color 。代码为给定的宽度和高度创建了空间。下一步是创建一个放入svg区域的形状。 SVG中有许多支持的形状，例如矩形和圆形。它们用于显示数据。例如，矩形（ <rect> ）SVG形状可以在条形图中创建条形。将形状放入svg区域时，可以指定x和y坐标的位置。 （0,0）的原点位于左上角。 x正值将形状推向右侧， y正值将形状从原点向下推。要将形状放置在距离上次挑战的500（宽度）x 100（高度） svg的中间， x坐标将为250， y坐标将为50. SVG rect具有四个属性。它位于svg区域的位置有x和y坐标。它还有一个height和width来指定大小。
+
+上个挑战用给定的宽和高创建了一个 svg 元素，因为在它的 style 标签中有 background-color，所以它是可见的。这一段代码为给定的宽和高腾出空间。 +下一步是在 svg 区域中创建图形。SVG 支持多种图形，比如矩形和圆形，并用它们来显示数据。例如，在条形图中一个矩形（<rect>）SVG 图形可以创建一个组。 +当把图形放入 svg 区域中时，你可以用 x 和 y 坐标来指定它的位置。起始点 (0,0) 是在左上角。x 正值将图形右移，y 正值将图形从原点下移 +若要把一个图形放在上个挑战的 500（宽）x 100（高）的 svg 中心，可将 x 坐标设置为 250，y 坐标设置为 50。 +SVG 的 rect 有四个属性。x 和 y 坐标指定图形放在 svg 区域的位置，height 和 width 指定图形大小。 +
## Instructions -
使用append()为svg添加一个rect形状，并为其赋予width属性25和height属性100.此外，将每个设置的rect x和y属性设置为0。
+
+用 append() 方法给 svg 添加一个 rect 图形。将它的 width 属性设置为 25，height 属性设置为 100，x 和 y 属性都设置为 0。 +
## Tests
```yml tests: - - text: 您的文档应该有1个rect元素。 + - text: 你的文档应该有 1 个 rect 元素。 testString: assert($('rect').length == 1); - - text: rect元素的width属性应设置为25。 + - text: rect 元素的 width 属性应该为 25。 testString: assert($('rect').attr('width') == '25'); - - text: rect元素的height属性应设置为100。 + - text: rect 元素的 height 属性应该为 100。 testString: assert($('rect').attr('height') == '100'); - - text: rect元素的x属性应设置为0。 + - text: rect 元素的 x 属性应该为 0。 testString: assert($('rect').attr('x') == '0'); - - text: rect元素的y属性应设置为0。 + - text: rect 元素的 y 属性应该为 0。 testString: assert($('rect').attr('y') == '0'); ``` @@ -49,14 +57,13 @@ tests: .append("svg") .attr("width", w) .attr("height", h) - // Add your code below this line + // 在下面添加你的代码 - // Add your code above this line + // 在上面添加你的代码 - ``` @@ -68,8 +75,26 @@ tests: ## Solution
-```js -// solution required +```html + + + + ``` -/section> +
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.chinese.md index d6a6538f04..6021a0f7cb 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.chinese.md @@ -2,38 +2,53 @@ id: 587d7fa9367417b2b2512bcf title: Dynamically Change the Height of Each Bar challengeType: 6 -videoUrl: '' -localeTitle: 动态改变每个栏的高度 +forumTopicId: 301486 +localeTitle: 动态更改每个条的高度 --- ## Description -
每个条的高度可以设置为数组中数据点的值，类似于动态设置x值的方式。
selection.attr（“property”，（d，i）=> {
/ *
* d是数据点值
* i是数组中数据点的索引
* /
}）
+
+和动态设置 x 值一样，每组的高也可以被设置成数组中数据点的值。 + +```js +selection.attr("property", (d, i) => { + /* + * d is the data point value + * i is the index of the data point in the array + */ +}) +``` + +
## Instructions -
更改height属性的回调函数以返回数据值乘以3. 注意
请记住，将所有数据点乘以相同的常量可以缩放数据（如放大）。在此示例中，有助于查看条形值之间的差异。
+
+改变 height 属性的回调函数，让它返回数据值乘以 3 的值。 +提示
记住，把所有数据点乘以相同的常数来对数据进行缩放（就像放大）。这有利于看清例子中每组之间的差异。 +
## Tests
```yml tests: - - text: 第一个rect的height应为36。 + - text: 第一个 rect 的 height 应该为 36。 testString: assert($('rect').eq(0).attr('height') == '36'); - - text: 第二个rect的height应为93。 + - text: 第二个 rect 的 height 应该为 93。 testString: assert($('rect').eq(1).attr('height') == '93'); - - text: 第三个rect的height应为66。 + - text: 第三个 rect 的 height 应该为 66。 testString: assert($('rect').eq(2).attr('height') == '66'); - - text: 第四个rect的height应为51。 + - text: 第四个 rect 的 height 应该为 51。 testString: assert($('rect').eq(3).attr('height') == '51'); - - text: 第五个rect的height应为75。 + - text: 第五个 rect 的 height 应该为 75。 testString: assert($('rect').eq(4).attr('height') == '75'); - - text: 第六个rect的height应为54。 + - text: 第六个 rect 的 height 应该为 54。 testString: assert($('rect').eq(5).attr('height') == '54'); - - text: 第七个rect的height应为87。 + - text: 第七个 rect 的 height 应该为 87。 testString: assert($('rect').eq(6).attr('height') == '87'); - - text: 第八个rect应该有42的height 。 + - text: 第八个 rect 的 height 应该为 42。 testString: assert($('rect').eq(7).attr('height') == '42'); - - text: 第九个rect的height应为27。 + - text: 第九个 rect 的 height 应该为 27。 testString: assert($('rect').eq(8).attr('height') == '27'); ``` @@ -66,15 +81,14 @@ tests: .attr("y", 0) .attr("width", 25) .attr("height", (d, i) => { - // Add your code below this line + // 在下面添加你的代码 - // Add your code above this line + // 在上面添加你的代码 }); - ``` @@ -86,8 +100,32 @@ tests: ## Solution
-```js -// solution required +```html + + + + ``` -/section> +
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.chinese.md index e67e07f7c4..e72d85ddc7 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.chinese.md @@ -2,38 +2,57 @@ id: 587d7fa9367417b2b2512bce title: Dynamically Set the Coordinates for Each Bar challengeType: 6 -videoUrl: '' -localeTitle: 动态设置每个条形的坐标 +forumTopicId: 301487 +localeTitle: 动态设置每个 Bar 的坐标 --- ## Description -
最后一个挑战是为dataset每个点创建一个矩形并将其附加到svg元素以表示一个条形。不幸的是，它们都堆叠在一起。矩形的放置由x和y属性处理。他们告诉D3从哪里开始在svg区域中绘制形状。最后一个挑战将它们设置为0，因此每个栏都放在左上角。对于条形图，所有条形应位于相同的垂直水平，这意味着所有条形的y值保持不变（为0）。但是，在添加新柱时， x值需要更改。请记住，较大的x值会将项目推向更远的位置。当您浏览dataset的数组元素时，x值应该会增加。 D3中的attr()方法接受回调函数来动态设置该属性。回调函数有两个参数，一个用于数据点本身（通常为d ），另一个用于数组中数据点的索引。索引的第二个参数是可选的。这是格式：
selection.attr（“property”，（d，i）=> {
/ *
* d是数据点值
* i是数组中数据点的索引
* /
}）
重要的是要注意，您不需要编写for循环或使用forEach()来迭代数据集中的项。回想一下， data()方法解析数据集，并且data()之后链接的任何方法对数据集中的每个项目运行一次。
+
+上个挑战在 svg 元素中为 dataset 的每一个数据点创建并且添加了一个矩形。其中一个矩形表示一组，但是它们相互重叠。 +矩形的摆放是由 x 和 y 属性处理的，它们告诉 D3 在 svg 区域的哪个位置开始绘制图形。上个挑战将它们都设置为 0，所以所有组都摆放在左上角。 +对于条形图，所有组应该处于相同的垂直水平上，也就是说所有组的 y 值相同（为 0），但是 x 值需要随着增添新的组而变化。注意 x 值越大图形就越靠近右边，所以当遍历 dataset 中的元素时，x 的值应该递增。 +D3 的 attr() 方法可接收一个回调函数来动态设置属性。这个回调函数有两个参数，一个是数据点本身（通常是 d），另一个是该数据点在数组中的下标，这个参数是可选的。下面是其格式： + +```js +selection.attr("property", (d, i) => { + /* + * d 是数据点的值 + * i 是数据点在数组中的下标 + */ +}) +``` + +值得注意的是，你不需要写 for 循环或者用 forEach 迭代数据集中的对象。data() 方法会解析数据集，任何链接在它后面的方法都会为数据集中的每个对象运行一次。 +
## Instructions -
更改x属性回调函数，使其返回索引时间30. 注意
每个条的宽度为25，因此将每个x值增加30会在条之间增加一些空间。任何大于25的值都可以在此示例中使用。
+
+改变 x 属性的回调函数，让它返回下标乘以 30 的值。 +提示
每组的宽为 25，所以每次 x 增加 30 可在每组之间留出一些空隙。在这个例子中任何比 25 大的数也同样适用。 +
## Tests
```yml tests: - - text: 第一个rect的x值应为0。 + - text: 第一个 rect 的 x 应该为 0。 testString: assert($('rect').eq(0).attr('x') == '0'); - - text: 第二个rect的x值应为30。 + - text: 第二个 rect 的 x 应该为 30。 testString: assert($('rect').eq(1).attr('x') == '30'); - - text: 第三个rect的x值应为60。 + - text: 第三个 rect 的 x 应该为 60。 testString: assert($('rect').eq(2).attr('x') == '60'); - - text: 第四个rect的x值应为90。 + - text: 第四个 rect 的 x 应该为 90。 testString: assert($('rect').eq(3).attr('x') == '90'); - - text: 第五个rect的x值应为120。 + - text: 第五个 rect 的 x 应该为 120。 testString: assert($('rect').eq(4).attr('x') == '120'); - - text: 第六个rect的x值应为150。 + - text: 第六个 rect 的 x 应该为 150。 testString: assert($('rect').eq(5).attr('x') == '150'); - - text: 第七个rect的x值应为180。 + - text: 第七个 rect 的 x 应该为 180。 testString: assert($('rect').eq(6).attr('x') == '180'); - - text: 第八个rect的x值应为210。 + - text: 第八个 rect 的 x 应该为 210。 testString: assert($('rect').eq(7).attr('x') == '210'); - - text: 第九个rect的x值应为240。 + - text: 第九个 rect 的 x 应该为 240。 testString: assert($('rect').eq(8).attr('x') == '240'); ``` @@ -63,18 +82,17 @@ tests: .enter() .append("rect") .attr("x", (d, i) => { - // Add your code below this line + // 在下面添加你的代码 - // Add your code above this line + // 在上面添加你的代码 }) .attr("y", 0) .attr("width", 25) .attr("height", 100); - ``` @@ -86,8 +104,32 @@ tests: ## Solution
-```js -// solution required +```html + + + + ``` -/section> +
-您可能已经注意到条形图看起来像是上下颠倒或倒置的。这是因为SVG如何使用（x，y）坐标。 -在SVG中，坐标的原点位于左上角。 x 坐标为0时，会在SVG区域的左边缘放置一个形状。 y 坐标为0时，会在SVG区域的顶部边缘放置一个形状。较高的 x 值将矩形推向右侧。较高的 y 值将矩形向下推。 -要使条形图正面朝上，您需要更改 y 坐标的计算方式。它需要考虑钢筋的高度和SVG区域的总高度。 -SVG区域的高度为100。如果集合中的数据点为0，则希望条形图从SVG区域的底部开始（而不是顶部）。为此， y 坐标需要值为100。如果数据点值为1，则应从100的 y 坐标开始，以将条形设置为底部。然后，您需要考虑钢筋的高度1，因此最终 y 坐标为99。 - y 坐标为 y = heightOfSVG-heightOfBar 会将条形图朝上放置。 +
+你可能已经注意到了常见的条形图像是把这个翻转或者颠倒过来。这是因为 SVG 的 (x, y) 坐标有些特别。 +在 SVG 中，坐标轴的原点在左上角。x 坐标为 0 将图形放在 SVG 区域的左边缘，y 坐标为 0 将图形放在 SVG 区域的上边缘。x 值增大矩形将向右移动，y 值增大矩形将向下移动。 +为了使条形图向上，需要改变 y 坐标计算的方式。这需要计算组的高度和 SVG 区域的总高度。 +SVG 区域的高度为 100。如果在集合中一个数据点的值为 0，这组将从 SVG 区域的最底端开始（而不是顶端）。为此，y 坐标的值应为 100。如果数据点的值为 1，你将从 y 坐标为 100 开始来将这组设置在底端，然后需要考虑该组的高度为 1，所以最终的 y 坐标将是 99。 +y 坐标为 y = heightOfSVG - heightOfBar 会将条形图向上放置。
## Instructions -
更改y属性的回调函数以将栏设置为正面朝上。请记住，条形的height是数据值d 3倍。 注意
通常，关系是y = h - m * d ，其中m是缩放数据点的常数。
+
+改变 y 属性的回调函数，让条形图向上放置。height 的值是 3 倍 d 的值。 +提示
通常，高度关系为 y = h - m * d，其中 m 是对数据点进行缩放的比例。 +
## Tests
```yml tests: - - text: 第一个rect的y值应为64。 + - text: 第一个 rect 的 y 值应该为 64。 testString: assert($('rect').eq(0).attr('y') == h - (dataset[0] * 3)); - - text: 第二个rect的y值应为7。 + - text: 第二个 rect 的 y 值应该为 7。 testString: assert($('rect').eq(1).attr('y') == h - (dataset[1] * 3)); - - text: 第三个rect的y值应为34。 + - text: 第三个 rect 的 y 值应该为 34。 testString: assert($('rect').eq(2).attr('y') == h - (dataset[2] * 3)); - - text: 第四个rect的y值应为49。 + - text: 第四个 rect 的 y 值应该为 49。 testString: assert($('rect').eq(3).attr('y') == h - (dataset[3] * 3)); - - text: 第五个rect的y值应为25。 + - text: 第五个 rect 的 y 值应该为 25。 testString: assert($('rect').eq(4).attr('y') == h - (dataset[4] * 3)); - - text: 第六个rect的y值应为46。 + - text: 第六个 rect 的 y 值应该为 46。 testString: assert($('rect').eq(5).attr('y') == h - (dataset[5] * 3)); - - text: 第七个rect的y值应为13。 + - text: 第七个 rect 的 y 值应该为 13。 testString: assert($('rect').eq(6).attr('y') == h - (dataset[6] * 3)); - - text: 第八个rect的y值应为58。 + - text: 第八个 rect 的 y 值应该为 58。 testString: assert($('rect').eq(7).attr('y') == h - (dataset[7] * 3)); - - text: 第九个rect的y值应为73。 + - text: 第九个 rect 的 y 值应该为 73。 testString: assert($('rect').eq(8).attr('y') == h - (dataset[8] * 3)); ``` @@ -70,17 +73,16 @@ tests: .append("rect") .attr("x", (d, i) => i * 30) .attr("y", (d, i) => { - // Add your code below this line + // 在下面添加你的代码 - // Add your code above this line + // 在上面添加你的代码 }) .attr("width", 25) .attr("height", (d, i) => 3 * d); - ``` @@ -92,8 +94,30 @@ tests: ## Solution
-```js -// solution required +```html + + + + ``` -/section> +
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.chinese.md index 0027859f93..cc044cbf9f 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.chinese.md @@ -2,26 +2,34 @@ id: 587d7fa8367417b2b2512bcb title: Learn About SVG in D3 challengeType: 6 -videoUrl: '' -localeTitle: 在D3中了解SVG +forumTopicId: 301489 +localeTitle: 了解 D3 中的 SVG --- ## Description -
SVG代表Scalable Vector Graphics 。这里的“可缩放”意味着，如果放大或缩小对象，它就不会出现像素化。它可以与显示系统一起扩展，无论是在小型移动屏幕还是大型电视监视器上。 SVG用于制作常见的几何形状。由于D3将数据映射到可视化表示，因此它使用SVG为可视化创建形状。网页的SVG形状必须位于HTML svg标记内。当样式使用相对单位（例如vh ， vw或百分比）时，CSS可以是可伸缩的，但使用SVG可以更灵活地构建数据可视化。
+
+SVG 是 Scalable Vector Graphics 的缩写。 +"scalable" 的意思是如果放大或缩小一个对象，它不会像素化。不管是在小的移动手机屏幕上还是在大的电视显示器上它都会随着显示系统缩放。 +SVG 用于制作常见的几何图形。由于 D3 将数据映射成可视化表达，它用 SVG 来创建可视化的图形。网页上的 SVG 图形必须在 HTML 的 svg 标签中。 +当使用相对单位（例如 vh、vw 或者百分比）时，CSS 是可伸缩的。但是在实现数据可视化的时候 SVG 更加的灵活。 +
## Instructions -
使用append() svg节点添加到body 。给它一个width属性设置为所提供的w常数和height设置为所提供的属性h使用恒定attr()为每个方法。您将在输出中看到它，因为在style标记中应用了粉红色的background-color 。 注意
宽度和高度属性没有单位。这是缩放的构建块 - 无论缩放级别如何，元素的宽高比始终为5：1。
+
+用 append() 给 body 加一个 svg 节点。分别使用 attr() 给这个 svg 一个 width 属性和一个 height 属性，并分别将它们设置为给定的常量 w 和给定的常量 h。你可以在输出中看见它，因为在 style 标签中它的 background-color 设置为 pink。 +提示
width 和 height 属性没有单位，它们是来定义缩放的。但无论怎么缩放，这个 svg 元素的宽高比永远是 5:1 。 +
## Tests
```yml tests: - - text: 您的文档应该有1个svg元素。 + - text: 你的文档应该有 1 个 svg 元素。 testString: assert($('svg').length == 1); - - text: svg元素的width属性应设置为500。 + - text: svg 元素的 width 属性应该为 500。 testString: assert($('svg').attr('width') == '500'||$('svg').css('width') == '500px'); - - text: svg元素的height属性应设置为100。 + - text: svg 元素的 height 属性应该为 100。 testString: assert($('svg').attr('height') == '100'||$('svg').css('height') == '100px'); ``` @@ -47,14 +55,13 @@ tests: const h = 100; const svg = d3.select("body") - // Add your code below this line + // 在下面添加你的代码 - // Add your code above this line + // 在上面添加你的代码 - ``` @@ -66,8 +73,26 @@ tests: ## Solution
-```js -// solution required +```html + + + + + ``` -/section> +
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.chinese.md index 9ce7fccbff..49d2c51eb2 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.chinese.md @@ -2,26 +2,32 @@ id: 587d7fa6367417b2b2512bc3 title: Select a Group of Elements with D3 challengeType: 6 -videoUrl: '' -localeTitle: 使用D3选择一组元素 +forumTopicId: 301490 +localeTitle: 用 D3 选择一组元素 --- ## Description -
D3还有selectAll()方法来选择一组元素。它返回文档中与输入字符串匹配的所有项目的HTML节点数组。这是一个选择文档中所有锚标记的示例： const anchors = d3.selectAll("a");与select()方法一样， selectAll()支持方法链接，您可以将其与其他方法一起使用。
+
+selectAll() 方法选择一组元素。它以 HTML 节点数组的形式返回该文本中所有匹配所输入字符串的对象。以下是一个选择文本中所有锚标签的例子： +const anchors = d3.selectAll("a"); +像 select() 方法一样，selectAll() 也支持链式调用，你可以在它之后调用其他方法。 +
## Instructions -
选择文档中的所有li标签，并通过链接.text()方法将其文本更改为“list item”。
+
+选择所有的 li 标签，通过 .text() 方法将它的文本改为 "list item" 。 +
## Tests
```yml tests: - - text: 页面上应该有3个li元素，每个元素中的文本应该是“list item”。大写和间距应完全匹配。 + - text: "页面上应该有 3 个 li 元素，每个元素的文本内容应为 'list item'。大小写和空格必须一致。" testString: assert($('li').text().match(/list item/g).length == 3); - - text: 您的代码应该访问d3对象。 + - text: 你应该能访问 d3 的对象。 testString: assert(code.match(/d3/g)); - - text: 您的代码应该使用selectAll方法。 + - text: 你应该使用 selectAll 方法。 testString: assert(code.match(/\.selectAll/g)); ``` @@ -41,14 +47,13 @@ tests:
  • Example
    • - ``` @@ -60,8 +65,19 @@ tests: ## Solution
    -```js -// solution required +```html + +
      +
    • Example
      • +
    • Example
      • +
    • Example
      • +
    + + + ``` -/section> +
    diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.chinese.md index 4df337ad6e..d586d79d7e 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.chinese.md @@ -2,30 +2,54 @@ id: 587d7fac367417b2b2512bdb title: Set a Domain and a Range on a Scale challengeType: 6 -videoUrl: '' -localeTitle: 在比例上设置域和范围 +forumTopicId: 301491 +localeTitle: 按比例设置域和范围 --- ## Description -
    默认情况下，缩放使用标识关系 - 输入值映射到输出值。但是尺度可以更加灵活和有趣。假设数据集的值范围为50到480.这是比例的输入信息，也称为域。您希望在SVG画布上沿x轴映射这些点，介于10个单位和500个单位之间。这是输出信息，也称为范围。 domain()和range()方法为比例设置这些值。两种方法都将至少两个元素的数组作为参数。这是一个例子：
    //设置域名
    //域包含输入值集
    scale.domain（[50,480]）;
    //设定范围
    //范围涵盖输出值集
    scale.range（[10,500]）;
    scale（50）//返回10
    scale（480）//返回500
    scale（325）//返回323.37
    scale（750）//返回807.67
    d3.scaleLinear（）
    请注意，比例使用域和范围值之间的线性关系来确定给定数字的输出应该是什么。域（50）中的最小值映射到范围中的最小值（10）。
    +
    +默认情况下，比例尺使用同一关系(identity relationship)，即输入值直接映射为输出值。但是比例尺可以更灵活更有趣。 +假设有一个数据集范围为 50 到 480，这是缩放的输入信息，也被称为域(domain)。 +你想沿着 10 个单位到 500 个单位的 x 轴映射这些点到 SVG 画布上。这是输出信息，也被称为范围(range)。 +domain() 和 range() 方法设置缩放的值，它们都以至少有两个元素的数组为参数。下面是一个例子： + +```js +// 设置域 +// 域覆盖了一组输入值 +scale.domain([50, 480]); +// 设置范围 +// 范围覆盖了一组输出值 +scale.range([10, 500]); +scale(50) // 返回 10 +scale(480) // 返回 500 +scale(325) // 返回 323.37 +scale(750) // 返回 807.67 +d3.scaleLinear() +``` + +注意，比例尺使用了域和范围之间的线性关系来找出给定数字的输出值。域中的最小值(50)映射为范围中的最小值(10)。 +
    ## Instructions -
    创建比例并将其域设置为[250, 500] ，范围为[10, 150] 。 注意
    您可以将domain()和range()方法链接到scale变量。
    +
    +创建一个比例尺，将它的域设置为 [250, 500]，范围设置为 [10, 150]。 +提示
    你可以将 domain() 和 range() 方法串联在 scale 变量后。 +
    ## Tests
    ```yml tests: - - text: 您的代码应使用domain()方法。 + - text: 你应该使用 domain() 方法。 testString: assert(code.match(/\.domain/g)); - - text: '比例的domain()应设置为[250, 500] 。' + - text: 比例尺的 domain() 应该设置为 [250, 500]。 testString: assert(JSON.stringify(scale.domain()) == JSON.stringify([250, 500])); - - text: 您的代码应使用range()方法。 + - text: 你应该使用 range() 方法。 testString: assert(code.match(/\.range/g)); - - text: '刻度的range()应设置为[10, 150] 。' + - text: 比例尺的 range() 应该设置为 [10, 150]。 testString: assert(JSON.stringify(scale.range()) == JSON.stringify([10, 150])); - - text: h2的文本应为-102。 + - text: h2 的文本应该为 -102。 testString: assert($('h2').text() == '-102'); ``` @@ -40,19 +64,18 @@ tests: ```html - ``` @@ -64,8 +87,19 @@ tests: ## Solution
    -```js -// solution required +```html + + + + ``` -/section> +
    diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/style-d3-labels.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/style-d3-labels.chinese.md index 5b3bc1dcd2..b15784d12c 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/style-d3-labels.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/style-d3-labels.chinese.md @@ -2,24 +2,28 @@ id: 587d7faa367417b2b2512bd3 title: Style D3 Labels challengeType: 6 -videoUrl: '' -localeTitle: 风格D3标签 +forumTopicId: 301492 +localeTitle: 给 D3 标签添加样式 --- ## Description -
    D3方法可以为条形标签添加样式。 fill属性设置text节点的文本颜色。 style()方法为其他样式设置CSS规则，例如“font-family”或“font-size”。
    +
    +D3 可以将样式添加到组标签中。fill 属性为 text 节点设置文本颜色，style() 方法设置其它样式的 CSS 规则，例如 "font-family"、"font-size"。 +
    ## Instructions -
    将text元素的font-size设置为25px，将文本颜色设置为红色。
    +
    +将 text 元素的 font-size 设置为 25px，文本颜色设置为 red。 +
    ## Tests
    ```yml tests: - - text: 标签应该都具有红色的fill颜色。 + - text: 所有标签的 fill 颜色应该是 red。 testString: assert($('text').css('fill') == 'rgb(255, 0, 0)'); - - text: 标签应该都具有25像素的font-size 。 + - text: 所有标签的 font-size 应该为 25 个像素。 testString: assert($('text').css('font-size') == '25px'); ``` @@ -61,14 +65,13 @@ tests: .text((d) => d) .attr("x", (d, i) => i * 30) .attr("y", (d, i) => h - (3 * d) - 3) - // Add your code below this line + // 在下面添加你的代码 - // Add your code above this line + // 在上面添加你的代码 - ``` @@ -80,8 +83,41 @@ tests: ## Solution
    -```js -// solution required +```html + + + + ``` -/section> +
    diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.chinese.md index c8960c6d99..b16603b52a 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.chinese.md @@ -2,38 +2,46 @@ id: 587d7fa8367417b2b2512bc9 title: Update the Height of an Element Dynamically challengeType: 6 -videoUrl: '' +forumTopicId: 301493 localeTitle: 动态更新元素的高度 --- ## Description -
    之前的挑战包括如何显示数组中的数据以及如何添加CSS类。您可以结合这些课程来创建简单的条形图。这有两个步骤：1）为数组中的每个数据点创建一个div 2）使用style()方法中的回调函数给每个div一个动态高度，该函数将高度设置为等于数据值。回想一下格式为使用回调函数设置样式： selection.style("cssProperty", (d) => d)
    +
    +之前的挑战包括如何从数组中显示数据和如何添加 CSS 类。将这些课程的内容结合起来只需两步你就能创建出一个简单的条形图： +1) 为每一个数组中的数据点都创建一个 div +2) 为每个 div 动态分配高度值，在 style() 方法中使用回调函数将高度值设置为数据大小 +回想使用回调函数设置样式的格式： +selection.style("cssProperty", (d) => d) +
    ## Instructions -
    将style()方法添加到编辑器中的代码中，以设置每个元素的height属性。使用回调函数返回数据点的值，并添加字符串“px”。
    +
    +在编辑器中添加 style() 方法给每个元素设置 height 属性。使用回调函数返回数据点的值加上字符串 "px"。 +
    ## Tests
    ```yml tests: - - text: 第一个div的height应为12像素。 + - text: 第一个 div 的 height 应该为 12 个像素。 testString: assert($('div').eq(0)[0].style.height === '12px'); - - text: 第二个div的height应为31像素。 + - text: 第二个 div 的 height 应该为 31 个像素。 testString: assert($('div').eq(1)[0].style.height === '31px'); - - text: 第三个div的height应为22像素。 + - text: 第三个 div 的 height 应该为 22 个像素。 testString: assert($('div').eq(2)[0].style.height === '22px'); - - text: 第四个div的height应为17像素。 + - text: 第四个 div 的 height 应该为 17 个像素。 testString: assert($('div').eq(3)[0].style.height === '17px'); - - text: 第五个div的height应为25像素。 + - text: 第五个 div 的 height 应该为 25 个像素。 testString: assert($('div').eq(4)[0].style.height === '25px'); - - text: 第六个div的height应为18像素。 + - text: 第六个 div 的 height 应该为 18 个像素。 testString: assert($('div').eq(5)[0].style.height === '18px'); - - text: 第七个div的height应为29像素。 + - text: 第七个 div 的 height 应该为 29 个像素。 testString: assert($('div').eq(6)[0].style.height === '29px'); - - text: 第八个div的height应为14像素。 + - text: 第八个 div 的 height 应该为 14 个像素。 testString: assert($('div').eq(7)[0].style.height === '14px'); - - text: 第九个div的height应为9像素。 + - text: 第九个 div 的 height 应该为 9 个像素。 testString: assert($('div').eq(8)[0].style.height === '9px'); ``` @@ -63,14 +71,13 @@ tests: .enter() .append("div") .attr("class", "bar") - // Add your code below this line + // 在下面添加你的代码 - // Add your code above this line + // 在上面添加你的代码 - ``` @@ -82,8 +89,27 @@ tests: ## Solution
    -```js -// solution required +```html + + + + ``` -/section> +
    diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.chinese.md index a76f7ea467..a7d8ce0e5c 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.chinese.md @@ -2,64 +2,77 @@ id: 587d7fac367417b2b2512bde title: Use a Pre-Defined Scale to Place Elements challengeType: 6 -videoUrl: '' -localeTitle: 使用预定义比例放置元素 +forumTopicId: 301494 +localeTitle: 使用预定义的比例放置元素 --- ## Description -
    设置了比例后，就可以再次绘制散点图。比例就像处理函数一样，可以将x和y原始数据转换为适合SVG画布上正确渲染的值。他们将数据保存在屏幕的绘图区域内。使用缩放功能设置SVG形状的坐标属性值。这包括rect或text元素的x和y属性，或者circles cx和cy 。这是一个例子：
    形状
    .attr（“x”，（d）=> xScale（d [0]））
    Scales设置形状坐标属性以将数据点放置到SVG画布上。显示实际数据值时不需要应用比例，例如，在工具提示或标签的text()方法中。
    +
    +当比例尺建立好后，是时候重新映射散点图了。比例尺就像操作函数一样，将 x 和 y 的原数据值变为适合并可在 SVG 画布上正确渲染的值。它们使数据在屏幕的布局区域内部。 +用比例尺函数为 SVG 图形设置坐标属性值。这包括 rect 或者 text 元素的 x 和 y 属性，或者 circles 的 cx 和 cy。以下是一个例子： + +```js +shape + .attr("x", (d) => xScale(d[0])) +``` + +比例尺设置图形坐标属性来将数据点放置在 SVG 画布上。当你显示实际数据值时，不用使用比例尺，例如，在提示框或标签中的 text() 方法。 +
    ## Instructions -
    使用xScale和yScale将circle和text形状定位到SVG画布上。对于circles ，应用比例来设置cx和cy属性。给它们半径5个单位。对于text元素，应用比例来设置x和y属性。标签应偏移到点的右侧。要执行此操作，请在将x数据传递给xScale之前将其添加10个单位。
    +
    +使用 xScale 和 yScale 将 circle 和 text 图形放置在 SVG 画布上。对于 circles，使用比例尺设置 cx 和 cy 属性，半径为 5 个单位。 +对于 text 元素，使用比例尺设置 x 和 y 属性。标签应该标注在点的右边，为此，在将 x 数据值传递给 xScale 之前要将它加上 10 个单位。 +
    ## Tests
    ```yml tests: - - text: 您的代码应该有10个circle元素。 + - text: 你应该有 10 个 circle 元素。 testString: assert($('circle').length == 10); - - text: 应用刻度后，第一个circle元素应具有大约91的cx值和大约368的cy值。它的r值也应为5。 + - text: 在使用比例尺后第一个 circle 元素的 cx 值应该大约为 91，cy 值应该大约为 368。它的 r 值应该为 5。 testString: assert(Math.round($('circle').eq(0).attr('cx')) == '91' && Math.round($('circle').eq(0).attr('cy')) == '368' && $('circle').eq(0).attr('r') == '5'); - - text: 应用刻度后，第二个circle元素的cx值应约为159， cy值应约为181。它的r值也应为5。 + - text: 在使用比例尺后第二个 circle 元素的 cx 值应该大约为 159，cy 值应该大约为 181。它的 r 值也应该为 5。 testString: assert(Math.round($('circle').eq(1).attr('cx')) == '159' && Math.round($('circle').eq(1).attr('cy')) == '181' && $('circle').eq(1).attr('r') == '5'); - - text: 应用刻度后，第三个circle元素应具有约340的cx值和约329的cy值。它的r值也应为5。 + - text: 在使用比例尺后第三个 circle 元素的 cx 值应该大约为 340，cy 值应该大约为 329。它的 r 值也应该为 5。 testString: assert(Math.round($('circle').eq(2).attr('cx')) == '340' && Math.round($('circle').eq(2).attr('cy')) == '329' && $('circle').eq(2).attr('r') == '5'); - - text: 应用刻度后，第四个circle元素应具有大约131的cx值和大约60的cy值。它的r值也应为5。 + - text: 在使用比例尺后第四个 circle 元素的 cx 值应该大约为 131，cy 值应该大约为 60。它的 r 值也应该为 5。 testString: assert(Math.round($('circle').eq(3).attr('cx')) == '131' && Math.round($('circle').eq(3).attr('cy')) == '60' && $('circle').eq(3).attr('r') == '5'); - - text: 应用刻度后，第五个circle元素应具有大约440的cx值和大约237的cy值。它的r值也应为5。 + - text: 在使用比例尺后第五个 circle 元素的 cx 值应该大约为 440，cy 值应该大约为 237。它的 r 值也应该为 5。 testString: assert(Math.round($('circle').eq(4).attr('cx')) == '440' && Math.round($('circle').eq(4).attr('cy')) == '237' && $('circle').eq(4).attr('r') == '5'); - - text: 应用刻度后，第六个circle元素应具有约271的cx值和约306的cy值。它的r值也应为5。 + - text: 在使用比例尺后第六个 circle 元素的 cx 值应该大约为 271，cy 值应该大约为 306。它的 r 值也应该为 5。 testString: assert(Math.round($('circle').eq(5).attr('cx')) == '271' && Math.round($('circle').eq(5).attr('cy')) == '306' && $('circle').eq(5).attr('r') == '5'); - - text: 应用刻度后，第七个circle元素的cx值约为361， cy值约为351。它的r值也应为5。 + - text: 在使用比例尺后第七个 circle 元素的 cx 值应该大约为 361，cy 值应该大约为 351。它的 r 值也应该为 5。 testString: assert(Math.round($('circle').eq(6).attr('cx')) == '361' && Math.round($('circle').eq(6).attr('cy')) == '351' && $('circle').eq(6).attr('r') == '5'); - - text: 应用刻度后，第八个circle元素应具有约261的cx值和约132的cy值。它的r值也应为5。 + - text: 在使用比例尺后第八个 circle 元素的 cx 值应该大约为 261，cy 值应该大约为 132。它的 r 值也应该为 5。 testString: assert(Math.round($('circle').eq(7).attr('cx')) == '261' && Math.round($('circle').eq(7).attr('cy')) == '132' && $('circle').eq(7).attr('r') == '5'); - - text: 应用刻度后，第九个circle元素应具有大约131的cx值和大约144的cy值。它的r值也应为5。 + - text: 在使用比例尺后第九个 circle 元素的 cx 值应该大约为 131，cy 值应该大约为 144。它的 r 值也应该为 5。 testString: assert(Math.round($('circle').eq(8).attr('cx')) == '131' && Math.round($('circle').eq(8).attr('cy')) == '144' && $('circle').eq(8).attr('r') == '5'); - - text: 应用刻度后，第十个circle元素应具有大约79的cx值和大约326的cy值。它的r值也应为5。 + - text: 在使用比例尺后第十个 circle 元素的 cx 值应该大约为 79，cy 值应该大约为 326。它的 r 值也应该为 5。 testString: assert(Math.round($('circle').eq(9).attr('cx')) == '79' && Math.round($('circle').eq(9).attr('cy')) == '326' && $('circle').eq(9).attr('r') == '5'); - - text: 您的代码应该有10个text元素。 + - text: 你应该有 10 个 text 元素。 testString: assert($('text').length == 10); - - text: 应用刻度后，第一个标签的x值约为100， y值约为368。 + - text: 在使用比例尺后第一个标签的 x 值应该大约为 100，y 值应该大约为 368。 testString: assert(Math.round($('text').eq(0).attr('x')) == '100' && Math.round($('text').eq(0).attr('y')) == '368'); - - text: 第二标签应该有一个x的大约168值和y施加鳞后的约181的值。 + - text: 在使用比例尺后第二个标签的 x 值应该大约为 168，y 值应该大约为 181。 testString: assert(Math.round($('text').eq(1).attr('x')) == '168' && Math.round($('text').eq(1).attr('y')) == '181'); - - text: 应用刻度后，第三个标签的x值约为350， y值约为329。 + - text: 在使用比例尺后第三个标签的 x 值应该大约为 350，y 值应该大约为 329。 testString: assert(Math.round($('text').eq(2).attr('x')) == '350' && Math.round($('text').eq(2).attr('y')) == '329'); - - text: 第四标签应该有一个x的大约141值和y施加鳞后的约60的值。 + - text: 在使用比例尺后第四个标签的 x 值应该大约为 141，y 值应该大约为 60。 testString: assert(Math.round($('text').eq(3).attr('x')) == '141' && Math.round($('text').eq(3).attr('y')) == '60'); - - text: 应用刻度后，第五个标签的x值约为449， y值约为237。 + - text: 在使用比例尺后第五个标签的 x 值应该大约为 449，y 值应该大约为 237。 testString: assert(Math.round($('text').eq(4).attr('x')) == '449' && Math.round($('text').eq(4).attr('y')) == '237'); - - text: 应用刻度后，第六个标签的x值约为280， y值约为306。 + - text: 在使用比例尺后第六个标签的 x 值应该大约为 280，y 值应该大约为 306。 testString: assert(Math.round($('text').eq(5).attr('x')) == '280' && Math.round($('text').eq(5).attr('y')) == '306'); - - text: 应用刻度后，第七个标签的x值约为370， y值约为351。 + - text: 在使用比例尺后第七个标签的 x 值应该大约为 370，y 值应该大约为 351。 testString: assert(Math.round($('text').eq(6).attr('x')) == '370' && Math.round($('text').eq(6).attr('y')) == '351'); - - text: 应用刻度后，第八个标签的x值约为270， y值约为132。 + - text: 在使用比例尺后第八个标签的 x 值应该大约为 270，y 值应该大约为 132。 testString: assert(Math.round($('text').eq(7).attr('x')) == '270' && Math.round($('text').eq(7).attr('y')) == '132'); - - text: 应用刻度后，第九个标签的x值约为140， y值约为144。 + - text: 在使用比例尺后第九个标签的 x 值应该大约为 140，y 值应该大约为 144。 testString: assert(Math.round($('text').eq(8).attr('x')) == '140' && Math.round($('text').eq(8).attr('y')) == '144'); - - text: 应用刻度后，第十个标签的x值约为88， y值约为326。 + - text: 在使用比例尺后第十个标签的 x 值应该大约为 88，y 值应该大约为 326。 testString: assert(Math.round($('text').eq(9).attr('x')) == '88' && Math.round($('text').eq(9).attr('y')) == '326'); ``` @@ -108,26 +121,25 @@ tests: .data(dataset) .enter() .append("circle") - // Add your code below this line + // 在下面添加你的代码 - // Add your code above this line - + // 在上面添加你的代码 + svg.selectAll("text") .data(dataset) .enter() .append("text") .text((d) => (d[0] + ", " + d[1])) - // Add your code below this line + // 在下面添加你的代码 - // Add your code above this line + // 在上面添加你的代码 - ``` @@ -139,8 +151,58 @@ tests: ## Solution
    -```js -// solution required +```html + + + + ``` -/section> +
    diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.chinese.md index 2cf338c08b..b473f8517e 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.chinese.md @@ -2,26 +2,59 @@ id: 587d7fac367417b2b2512bdd title: Use Dynamic Scales challengeType: 6 -videoUrl: '' +forumTopicId: 301495 localeTitle: 使用动态比例 --- ## Description -
    D3 min()和max()方法可用于帮助设置比例。给定复杂的数据集，一个优先级是设置比例，以便可视化符合SVG容器的宽度和高度。您希望在SVG画布内绘制所有数据，以便在网页上显示。下面的示例设置散点图数据的x轴刻度。 domain()方法将信息传递给关于绘图的原始数据值的比例。 range()方法为其提供有关可视化的网页上的实际空间的信息。在该示例中，域从0变为集合中的最大值。它使用max()方法和基于数组中x值的回调函数。该范围使用SVG画布的宽度（ w ），但它也包含一些填充。这会在散点图点和SVG画布边缘之间留出空间。
    const dataset = [
    [34,78]，
    [109,280]，
    [310,120]，
    [79,411]，
    [420,220]，
    [233,145]，
    [333,96]，
    [222,333]，
    [78,320]，
    [21,123]
    ]。
    const w = 500;
    const h = 500;

    //在SVG画布边界和绘图之间填充
    const padding = 30;
    const xScale = d3.scaleLinear（）
    .domain（[0，d3.max（dataset，（d）=> d [0]）]）
    .range（[padding，w - padding]）;
    填充可能首先令人困惑。将x轴描绘为0到500的水平线（SVG画布的宽度值）。在range()方法中包含填充会强制绘图沿着该行（而不是0）从30开始，并以470（而不是500）结束。
    +
    +D3 的 min() 和 max() 方法在设置比例尺时十分有用。 +对于一个复杂的数据集，首要是设置比例尺，这样可视化才能适合 SVG 容器的宽和高。所有数据都应布局在 SVG 画布内部，这样它们在页面上才是可见的。 +下面这个例子为散点图设置了 x 轴的比例尺。domain() 方法给比例尺传递关于散点图原数据值的信息，range() 方法给出在页面上进行可视化的实际空间信息。 +在这个例子中，domain 是从 0 到数据集中的最大值，它使用 max() 方法和基于数组中 x 值的回调函数。range 使用 SVG 画布的宽(w)并包含 padding，这将在散点图和 SVG 画布边缘之间添加空隙。 + +```js +const dataset = [ + [ 34, 78 ], + [ 109, 280 ], + [ 310, 120 ], + [ 79, 411 ], + [ 420, 220 ], + [ 233, 145 ], + [ 333, 96 ], + [ 222, 333 ], + [ 78, 320 ], + [ 21, 123 ] +]; +const w = 500; +const h = 500; + +// SVG 画布边缘和散点图之间的 padding +const padding = 30; +const xScale = d3.scaleLinear() + .domain([0, d3.max(dataset, (d) => d[0])]) + .range([padding, w - padding]); +``` + +在一开始可能很难理解 padding。想象 x 轴是一条从 0 到 500 （SVG 画布宽的值）的水平直线。在 range() 方法中包含 padding 使散点图沿着这条直线从 30 （而不是 0）开始，在 470 （而不是 500）结束。 +
    ## Instructions -
    使用yScale变量创建线性y轴刻度。域应该从零开始并转到集合中的最大y值。范围应使用SVG高度（ h ）并包括填充。 注意
    记得保持情节正面朝上。设置y坐标的范围时，较高的值（高度减去填充）是第一个参数，较低的值是第二个参数。
    +
    +使用 yScale 变量创建一个线性的 y 轴比例尺。domain 应该从 0 开始到数据集中 y 的最大值，range 应该使用 SVG 的高(h)并包含 padding。 +提示
    记得正向布局。当你为 y 坐标设置 range 时，大的值（height 减去 padding）是第一个参数，小的值是第二个参数。 +
    ## Tests
    ```yml tests: - - text: h2的文本应为30。 + - text: h2 中的文本应该是 30。 testString: assert(output == 30 && $('h2').text() == '30'); - - text: 'yScale的domain()应该等于[0, 411] 0,411 [0, 411] 。' + - text: yScale 的 domain() 应该等于 [0, 411]。 testString: assert(JSON.stringify(yScale.domain()) == JSON.stringify([0, 411])); - - text: 'yScale的range()应相当于[470, 30] 470,30 [470, 30] 。' + - text: yScale 的 range() 应该等于 [470, 30]。 testString: assert(JSON.stringify(yScale.range()) == JSON.stringify([470, 30])); ``` @@ -52,29 +85,28 @@ tests: const w = 500; const h = 500; - // Padding between the SVG canvas boundary and the plot + // SVG 画布边缘和图形之间的padding const padding = 30; - // Create an x and y scale + // 创建 x 和 y 的比例尺 const xScale = d3.scaleLinear() .domain([0, d3.max(dataset, (d) => d[0])]) .range([padding, w - padding]); - // Add your code below this line + // 在下面添加你的代码 const yScale = undefined; - // Add your code above this line + // 在上面添加你的代码 - const output = yScale(411); // Returns 30 + const output = yScale(411); // 返回 30 d3.select("body") .append("h2") .text(output) - ``` @@ -86,8 +118,45 @@ tests: ## Solution
    -```js -// solution required +```html + + + + ``` -/section> +
    diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.chinese.md index 8bf8acbe95..618aa4afd7 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.chinese.md @@ -2,25 +2,49 @@ id: 587d7fac367417b2b2512bdc title: Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a Dataset challengeType: 6 -videoUrl: '' -localeTitle: 使用d3.max和d3.min函数查找数据集中的最小值和最大值 +forumTopicId: 301496 +localeTitle: 使用 d3.max 和 d3.min 函数在数据集中查找最小值和最大值 --- ## Description -
    D3方法domain()和range()根据数据为您的比例设置该信息。有几种方法可以使这更容易。通常在设置域时，您需要使用数据集中的最小值和最大值。尝试手动查找这些值，尤其是在大型数据集中，可能会导致错误。 D3有两种方法min()和max()来返回这些信息。这是一个例子：
    const exampleData = [34,234,73,90,6,52];
    d3.min（exampleData）//返回6
    d3.max（exampleData）//返回234
    数据集可能具有嵌套数组，例如散点图示例中的[x，y]坐标对。在这种情况下，您需要告诉D3如何计算最大值和最小值。幸运的是， min()和max()方法都采用了回调函数。在此示例中，回调函数的参数d用于当前内部数组。回调需要从内部数组（x或y值）返回要计算最大值或最小值的元素。这是一个如何使用数组数组查找最小值和最大值的示例：
    const locationData = [[1,7]，[6,3]，[8,3]];
    //返回第一个元素中的最小数字
    const minX = d3.min（locationData，（d）=> d [0]）;
    // minX比较1,6和8并设置为1
    +
    +D3 的方法 domain() 和 range() 根据数据设置比例尺的信息。下面有几种更简单的方法。 +通常当你设置域的时候，你会想用数据集中的最小值和最大值。尤其是在很大的数据集中，尝试手动的找到这些值可能会出错。 +D3 有两个方法——min() 和 max() 来返回这些值。下面是一个例子： + +```js +const exampleData = [34, 234, 73, 90, 6, 52]; +d3.min(exampleData) // 返回 6 +d3.max(exampleData) // 返回 234 +``` + +像在散点图的例子中的 [x, y] 坐标对一样，数据集有可能嵌套数组。在这种情况下，你需要告诉 D3 怎么计算最大值和最小值。 +辛运的是，min() 和 max() 都可以使用回调函数。 +在下面这个例子中，回调函数的参数 d 是当前的内数组。回调函数需要从内数组中返回你想比较大小的元素（x 还是 y 值）。下面是一个如何找到二维数组的最大值和最小值的例子： + +```js +const locationData = [[1, 7],[6, 3],[8, 3]]; +// 返回第一个元素中的最小值s +const minX = d3.min(locationData, (d) => d[0]); +// 在 1，6，8 中 minX 为 1 +``` + +
    ## Instructions -
    positionData变量包含一个三维（3D）数组。使用D3方法从数组中查找z坐标（第三个值）的最大值，并将其保存在output变量中。 注意
    有趣的事实 - D3可以绘制3D阵列。
    +
    +在 positionData 变量中保存一个三维数组。用 D3 的方法去找到数组中 z 坐标（第三个值）的最大值并将它保存在 output 变量中。 +
    ## Tests
    ```yml tests: - - text: h2的文本应为8。 + - text: h2 的文本应该为 8。 testString: assert(output == 8 && $('h2').text() == '8'); - - text: 您的代码应使用max()方法。 - testString: assert(code.match(/\.max/g), 'Your code should use the max() method.') + - text: 你应该使用 max() 方法。 + testString: assert(code.match(/\.max/g), 'Your code should use the max() method.') ``` @@ -35,18 +59,17 @@ tests: - ``` @@ -58,8 +81,19 @@ tests: ## Solution
    -```js -// solution required +```html + + + + ``` -/section> +
    diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/work-with-data-in-d3.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/work-with-data-in-d3.chinese.md index fd391f60e8..bdb67b2c9d 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/work-with-data-in-d3.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/work-with-data-in-d3.chinese.md @@ -2,28 +2,52 @@ id: 587d7fa7367417b2b2512bc4 title: Work with Data in D3 challengeType: 6 -videoUrl: '' -localeTitle: 在D3中使用数据 +forumTopicId: 301497 +localeTitle: 使用 D3 中的数据 --- ## Description -
    D3库专注于数据驱动的方法。当您拥有一组数据时，可以应用D3方法在页面上显示它。数据有多种格式，但这一挑战使用了一组简单的数字。第一步是让D3知道数据。 data()方法用于选择DOM元素以将数据附加到这些元素。数据集作为参数传递给方法。常见的工作流模式是在文档中为集合中的每个数据创建一个新元素。 D3为此目的使用了enter()方法。当enter()与data()方法结合使用时，它会查看页面中的选定元素，并将它们与集合中的数据项数量进行比较。如果元素少于数据项，则会创建缺少的元素。下面是一个示例，它选择一个ul元素并根据数组中的条目数创建一个新的列表项：
    <BODY>
    <UL> </ UL>
    <SCRIPT>
    const dataset = [“a”，“b”，“c”];
    d3.select（ “UL”）。全选（ “礼”）
    。数据（数据集）
    。输入（）
    .append（ “里”）
    .text（“新项目”）;
    </ SCRIPT>
    </ BODY>
    选择尚不存在的元素似乎令人困惑。此代码告诉D3首先选择页面上的ul 。接下来，选择所有列表项，返回空选择。然后data()方法检查数据集并运行以下代码三次，对于数组中的每个项目运行一次。 enter()方法看到页面上没有li元素，但它需要3（数据dataset每个数据对应一个）。新的li元素被附加到ul并具有文本“New item”。
    +
    +D3 是数据驱动的库,可以使用 D3 的方法将数组形式的数据显示在页面上。 +第一步是让 D3 知道数据。data 方法选择连接着数据的 DOM 元素,数据集作为参数传递给该方法。 +常见的方法是在文档中为数据集中的每一个数据创建一个元素，为此，你可以使用 D3 的 enter() 方法 +当 enter() 和 data() 方法一起使用时，它把从页面中选择的元素和数据集中的元素作比较。如果页面中选择的元素较少则创建缺少的元素。 +以下是一个选择 ul 元素并根据添加的数组创建新的列表项的例子。 + +```html + +
      + + +``` + +选择不存在的 li 元素似乎有些难以理解。事实上，这段代码先选择页面上的 ul 元素，再选择所有的列表项——li，它将返回空。然后data()方法接收数组作为参数，并运行三次后面的代码，每次对应数组中的一个对象。enter()方法发现页面中没有 li 元素，但是需要 3 个（每个对应dataset中的一个对象）。它将在 ul 中添加带有文本 "New item" 的 li 元素。 +
      ## Instructions -
      选择body节点，然后选择所有h2元素。让D3为dataset数组中的每个项创建并附加h2标记。 h2的文字应该说“新标题”。您的代码应使用data()和enter()方法。
      +
      +选择 body 节点，然后选择所有的 h2 元素。让 D3 为 dataset 数组中的每一个对象创建并添加文本为 "New Title" 的 h2 标签。你应该使用 data() 和 enter() 方法。 +
      ## Tests
      ```yml tests: - - text: 您的文档应该有9个h2元素。 + - text: 你的文档应该有 9 个 h2 元素。 testString: assert($('h2').length == 9); - - text: h2元素中的文本应该是“New Title”。大写和间距应完全匹配。 + - text: "h2 元素中的文本应为 'New Title'。大小写和空格必须一致。" testString: assert($('h2').text().match(/New Title/g).length == 9); - - text: 您的代码应该使用data()方法。 + - text: 你应该使用 data() 方法。 testString: assert(code.match(/\.data/g)); - - text: 您的代码应使用enter()方法。 + - text: 你应该使用 enter() 方法。 testString: assert(code.match(/\.enter/g)); ``` @@ -40,14 +64,13 @@ tests: - ``` @@ -59,8 +82,21 @@ tests: ## Solution
      -```js -// solution required +```html + + + + ``` -/section> +
      diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.chinese.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.chinese.md index e4b293fc10..eedda14963 100644 --- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.chinese.md +++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.chinese.md @@ -2,38 +2,47 @@ id: 587d7fa7367417b2b2512bc5 title: Work with Dynamic Data in D3 challengeType: 6 -videoUrl: '' -localeTitle: 在D3中使用动态数据 +forumTopicId: 301498 +localeTitle: 使用 D3 中的动态数据 --- ## Description -
      最后两个挑战涵盖了使用data()和enter()方法使用D3动态显示数据的基础知识。这些方法采用数据集，并与append()方法一起为数据集中的每个条目创建一个新的DOM元素。在上一个挑战中，您为dataset数组中的每个项创建了一个新的h2元素，但它们都包含相同的文本“New Title”。这是因为您没有使用绑定到每个h2元素的数据。 D3 text()方法可以将字符串或回调函数作为参数： selection.text((d) => d)在上面的示例中，参数d指的是数据集中绑定选择的单个条目至。使用当前示例作为上下文，第一个h2元素绑定到12，第二个h2元素绑定到31，第三个h2元素绑定到22，依此类推。
      +
      +最后两个挑战涉及到使用 D3 的 data() 和 enter() 方法来动态展示数据。它们以数据集为参数，和 append() 方法一起使用，为数据集中的每一个元素对象创建一个 DOM 元素。 +在之前的挑战中，你为 dataset 数组中的每一个对象创建了一个新的 h2 元素，但是它们的文本都是相同的 "New Title"。 这是因为你还没有使用和每个 h2 元素关联的数据。 +text() 方法以字符串或者回调函数作为参数： +selection.text((d) => d) +上面这个例子中的参数 d 指关联数据集的一个对象。 +以当前例子为例，第一个 h2 元素和 12 关联，第二个 h2 元素和 31 关联，第三个 h2 元素和 22 关联，以此类推。 +
      ## Instructions -
      更改text()方法，以便每个h2元素显示dataset数组中具有单个空格和“USD”的相应值。例如，第一个标题应为“12美元”。
      +
      +改变 text() 方法使得每个 h2 元素显示 dataset 数组中的对应值加上一个空格和 "USD"。例如，第一个标题应该为 "12 USD"。 +
      ## Tests
      ```yml tests: - - text: 第一个h2应该有“12美元”的文字。 + - text: "第一个 h2 的文本应该为 '12 USD'。" testString: assert($('h2').eq(0).text() == "12 USD"); - - text: 第二个h2应该有“31美元”的文字。 + - text: "第二个 h2 的文本应该为 '31 USD'。" testString: assert($('h2').eq(1).text() == "31 USD"); - - text: 第三个h2应该有“22美元”的文字。 + - text: "第三个 h2 的文本应该为 '22 USD'。" testString: assert($('h2').eq(2).text() == "22 USD"); - - text: 第四个h2应该有“17美元”的文字。 + - text: "第四个 h2 的文本应该为 '17 USD'。" testString: assert($('h2').eq(3).text() == "17 USD"); - - text: 第五个h2应该有“25美元”的文字。 + - text: "第五个 h2 的文本应该为 '25 USD'。" testString: assert($('h2').eq(4).text() == "25 USD"); - - text: 第六个h2应该有“18美元”的文字。 + - text: "第六个 h2 的文本应该为 '18 USD'。" testString: assert($('h2').eq(5).text() == "18 USD"); - - text: 第七个h2应该有“29美元”的文字。 + - text: "第七个 h2 的文本应该为 '29 USD'。" testString: assert($('h2').eq(6).text() == "29 USD"); - - text: 第八个h2应该有“14美元”的文字。 + - text: "第八个 h2 的文本应该为 '14 USD'。" testString: assert($('h2').eq(7).text() == "14 USD"); - - text: 第九个h2应该有“9美元”的文字。 + - text: "第九个 h2 的文本应该为 '9 USD'。" testString: assert($('h2').eq(8).text() == "9 USD"); ``` @@ -54,14 +63,13 @@ tests: .data(dataset) .enter() .append("h2") - // Add your code below this line + // 在下面添加你的代码 .text("New Title"); - // Add your code above this line + // 在上面添加你的代码 - ``` @@ -73,8 +81,20 @@ tests: ## Solution
      -```js -// solution required +```html + + + + ``` -/section> +