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