Add languages Russian, Arabic, Chinese, Portuguese (#18305)
This commit is contained in:
Beau Carnes
committed by
mrugesh mohapatra
mrugesh mohapatra
parent
09d3eca712
commit
2ca3a2093f
@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd4
|
||||
title: Add a Hover Effect to a D3 Element
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: 将悬停效果添加到D3元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">当用户用鼠标悬停在其上时，可以添加突出显示条形的效果。到目前为止，矩形的样式使用内置的D3和SVG方法，但您也可以使用CSS。使用<code>attr()</code>方法在SVG元素上设置CSS类。然后，新类的<code>:hover</code>伪类保存任何悬停效果的样式规则。 </section>
|
||||
|
||||
## Instructions
|
||||
<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> 。
|
||||
testString: 'assert($("rect").attr("class") == "bar", "Your <code>rect</code> elements should have a class of <code>bar</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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) => 3 * d)
|
||||
.attr("fill", "navy")
|
||||
// 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 - (3 * d) - 3);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,111 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd6
|
||||
title: Add a Tooltip to a D3 Element
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: 将工具提示添加到D3元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">当用户将鼠标悬停在该项目上时，工具提示会显示有关页面上项目的更多信息。有几种方法可以向可视化添加工具提示，此挑战使用SVG <code>title</code>元素。 <code>title</code>对与<code>text()</code>方法一起动态地向条形图添加数据。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在每个<code>rect</code>节点下附加<code>title</code>元素。然后使用回调函数调用<code>text()</code>方法，以便文本显示数据值。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该有9个<code>title</code>元素。
|
||||
testString: 'assert($("title").length == 9, "Your code should have 9 <code>title</code> elements.");'
|
||||
- text: 第一个<code>title</code>元素的工具提示文本应为12。
|
||||
testString: 'assert($("title").eq(0).text() == "12", "The first <code>title</code> element should have tooltip text of 12.");'
|
||||
- text: 第二个<code>title</code>元素的工具提示文本应为31。
|
||||
testString: 'assert($("title").eq(1).text() == "31", "The second <code>title</code> element should have tooltip text of 31.");'
|
||||
- text: 第三个<code>title</code>元素的工具提示文本应为22。
|
||||
testString: 'assert($("title").eq(2).text() == "22", "The third <code>title</code> element should have tooltip text of 22.");'
|
||||
- text: 第四个<code>title</code>元素的工具提示文本应为17。
|
||||
testString: 'assert($("title").eq(3).text() == "17", "The fourth <code>title</code> element should have tooltip text of 17.");'
|
||||
- text: 第五个<code>title</code>元素的工具提示文本应为25。
|
||||
testString: 'assert($("title").eq(4).text() == "25", "The fifth <code>title</code> element should have tooltip text of 25.");'
|
||||
- text: 第六个<code>title</code>元素的工具提示文本应为18。
|
||||
testString: 'assert($("title").eq(5).text() == "18", "The sixth <code>title</code> element should have tooltip text of 18.");'
|
||||
- text: 第七个<code>title</code>元素的工具提示文本应为29。
|
||||
testString: 'assert($("title").eq(6).text() == "29", "The seventh <code>title</code> element should have tooltip text of 29.");'
|
||||
- text: 第八个<code>title</code>元素的工具提示文本应为14。
|
||||
testString: 'assert($("title").eq(7).text() == "14", "The eighth <code>title</code> element should have tooltip text of 14.");'
|
||||
- text: 第九个<code>title</code>元素的工具提示文本应为9。
|
||||
testString: 'assert($("title").eq(8).text() == "9", "The ninth <code>title</code> element should have tooltip text of 9.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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")
|
||||
// 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'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,106 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bd8
|
||||
title: Add Attributes to the Circle Elements
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: 将属性添加到圆形元素
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该有10个<code>circle</code>元素。
|
||||
testString: 'assert($("circle").length == 10, "Your code should have 10 <code>circle</code> elements.");'
|
||||
- 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", "The first <code>circle</code> element should have a <code>cx</code> value of 34, a <code>cy</code> value of 422, and an <code>r</code> value of 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", "The second <code>circle</code> element should have a <code>cx</code> value of 109, a <code>cy</code> value of 220, and an <code>r</code> value of 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", "The third <code>circle</code> element should have a <code>cx</code> value of 310, a <code>cy</code> value of 380, and an <code>r</code> value of 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", "The fourth <code>circle</code> element should have a <code>cx</code> value of 79, a <code>cy</code> value of 89, and an <code>r</code> value of 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", "The fifth <code>circle</code> element should have a <code>cx</code> value of 420, a <code>cy</code> value of 280, and an <code>r</code> value of 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", "The sixth <code>circle</code> element should have a <code>cx</code> value of 233, a <code>cy</code> value of 355, and an <code>r</code> value of 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", "The seventh <code>circle</code> element should have a <code>cx</code> value of 333, a <code>cy</code> value of 404, and an <code>r</code> value of 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", "The eighth <code>circle</code> element should have a <code>cx</code> value of 222, a <code>cy</code> value of 167, and an <code>r</code> value of 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", "The ninth <code>circle</code> element should have a <code>cx</code> value of 78, a <code>cy</code> value of 180, and an <code>r</code> value of 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", "The tenth <code>circle</code> element should have a <code>cx</code> value of 21, a <code>cy</code> value of 377, and an <code>r</code> value of 5.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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")
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512bdf
|
||||
title: Add Axes to a Visualization
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">散点图现在具有x轴。使用<code>axisLeft()</code>方法在名为<code>yAxis</code>的变量中创建y轴。然后使用<code>g</code>元素渲染轴。确保使用<code>transform</code>属性将轴转换为右边的填充单元数量，然后降低0个单位。记得<code>call()</code>轴。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应使用<code>axisLeft()</code>方法， <code>yScale</code>作为参数传递。
|
||||
testString: 'assert(code.match(/\.axisLeft\(yScale\)/g), "Your code should use the <code>axisLeft()</code> method with <code>yScale</code> passed as the argument.");'
|
||||
- text: 'y轴<code>g</code>元素应具有<code>transform</code>属性以将轴平移（60,0）。'
|
||||
testString: 'assert($("g").eq(1).attr("transform").match(/translate\(60\s*?,\s*?0\)/g), "The y-axis <code>g</code> element should have a <code>transform</code> attribute to translate the axis by (60, 0).");'
|
||||
- text: 您的代码应该调用<code>yAxis</code> 。
|
||||
testString: 'assert(code.match(/\.call\(yAxis\)/g), "Your code should call the <code>yAxis</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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);
|
||||
// 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>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc8
|
||||
title: Add Classes with D3
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: 使用D3添加类
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">即使对于较小的应用程序，在HTML元素上使用大量内联样式也很难管理。使用CSS规则将类添加到元素和样式一次更容易。 D3具有<code>attr()</code>方法，可以向元素添加任何HTML属性，包括类名。 <code>attr()</code>方法的工作方式与<code>style()</code>工作方式相同。它采用逗号分隔值，并可以使用回调函数。这是一个向选择中添加“容器”类的示例： <code>selection.attr("class", "container");</code> </section>
|
||||
|
||||
## Instructions
|
||||
<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> 。
|
||||
testString: 'assert($("div").attr("class") == "bar", "Your <code>div</code> elements should have a class of <code>bar</code>.");'
|
||||
- text: 您的代码应使用<code>attr()</code>方法。
|
||||
testString: 'assert(code.match(/\.attr/g), "Your code should use the <code>attr()</code> method.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bc2
|
||||
title: Add Document Elements with D3
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用<code>select</code>方法选择文档中的<code>body</code>标签。然后为其<code>append</code>一个<code>h1</code>标签，并将文本“Learning D3”添加到<code>h1</code>元素中。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>body</code>应该有一个<code>h1</code>元素。
|
||||
testString: 'assert($("body").children("h1").length == 1, "The <code>body</code> should have one <code>h1</code> element.");'
|
||||
- text: <code>h1</code>元素应该包含文本“Learning D3”。
|
||||
testString: 'assert($("h1").text() == "Learning D3", "The <code>h1</code> element should have the text "Learning D3" in it.");'
|
||||
- text: 您的代码应该访问<code>d3</code>对象。
|
||||
testString: 'assert(code.match(/d3/g), "Your code should access the <code>d3</code> object.");'
|
||||
- text: 您的代码应该使用<code>select</code>方法。
|
||||
testString: 'assert(code.match(/\.select/g), "Your code should use the <code>select</code> method.");'
|
||||
- text: 您的代码应该使用<code>append</code>方法。
|
||||
testString: 'assert(code.match(/\.append/g), "Your code should use the <code>append</code> method.");'
|
||||
- text: 您的代码应该使用<code>text</code>方法。
|
||||
testString: 'assert(code.match(/\.text/g), "Your code should use the <code>text</code> method.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc6
|
||||
title: Add Inline Styling to Elements
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: 向元素添加内联样式
|
||||
---
|
||||
|
||||
## Description
|
||||
<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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的<code>h2</code>元素应该有verdana的<code>font-family</code> 。
|
||||
testString: 'assert($("h2").css("font-family") == "verdana", "Your <code>h2</code> elements should have a <code>font-family</code> of verdana.");'
|
||||
- text: 您的代码应使用<code>style()</code>方法。
|
||||
testString: 'assert(code.match(/\.style/g), "Your code should use the <code>style()</code> method.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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"))
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,99 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd2
|
||||
title: Add Labels to D3 Elements
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 第一个<code>text</code>元素的标签应为12， <code>y</code>值应为61。
|
||||
testString: 'assert($("text").eq(0).text() == "12" && $("text").eq(0).attr("y") == "61", "The first <code>text</code> element should have a label of 12 and a <code>y</code> value of 61.");'
|
||||
- text: 第二个<code>text</code>元素的标签应为31， <code>y</code>值应为4。
|
||||
testString: 'assert($("text").eq(1).text() == "31" && $("text").eq(1).attr("y") == "4", "The second <code>text</code> element should have a label of 31 and a <code>y</code> value of 4.");'
|
||||
- text: 第三个<code>text</code>元素的标签应为22， <code>y</code>值应为31。
|
||||
testString: 'assert($("text").eq(2).text() == "22" && $("text").eq(2).attr("y") == "31", "The third <code>text</code> element should have a label of 22 and a <code>y</code> value of 31.");'
|
||||
- text: 第四个<code>text</code>元素的标签应为17， <code>y</code>值应为46。
|
||||
testString: 'assert($("text").eq(3).text() == "17" && $("text").eq(3).attr("y") == "46", "The fourth <code>text</code> element should have a label of 17 and a <code>y</code> value of 46.");'
|
||||
- text: 第五个<code>text</code>元素的标签应为25， <code>y</code>值应为22。
|
||||
testString: 'assert($("text").eq(4).text() == "25" && $("text").eq(4).attr("y") == "22", "The fifth <code>text</code> element should have a label of 25 and a <code>y</code> value of 22.");'
|
||||
- text: 第六个<code>text</code>元素的标签应为18， <code>y</code>值应为43。
|
||||
testString: 'assert($("text").eq(5).text() == "18" && $("text").eq(5).attr("y") == "43", "The sixth <code>text</code> element should have a label of 18 and a <code>y</code> value of 43.");'
|
||||
- text: 第七个<code>text</code>元素的标签应为29， <code>y</code>值应为10。
|
||||
testString: 'assert($("text").eq(6).text() == "29" && $("text").eq(6).attr("y") == "10", "The seventh <code>text</code> element should have a label of 29 and a <code>y</code> value of 10.");'
|
||||
- text: 第八个<code>text</code>元素的标签应为14， <code>y</code>值应为55。
|
||||
testString: 'assert($("text").eq(7).text() == "14" && $("text").eq(7).attr("y") == "55", "The eighth <code>text</code> element should have a label of 14 and a <code>y</code> value of 55.");'
|
||||
- text: 第九个<code>text</code>元素的标签应为9， <code>y</code>值应为70。
|
||||
testString: 'assert($("text").eq(8).text() == "9" && $("text").eq(8).attr("y") == "70", "The ninth <code>text</code> element should have a label of 9 and a <code>y</code> value of 70.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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");
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
<body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,113 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bd9
|
||||
title: Add Labels to Scatter Plot Circles
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: 添加标签以分散绘图圆圈
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该有10个<code>text</code>元素。
|
||||
testString: 'assert($("text").length == 10, "Your code should have 10 <code>text</code> elements.");'
|
||||
- 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", "The first label should have text of "34, 78", an <code>x</code> value of 39, and a <code>y</code> value of 422.");'
|
||||
- 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", "The second label should have text of "109, 280", an <code>x</code> value of 114, and a <code>y</code> value of 220.");'
|
||||
- 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", "The third label should have text of "310, 120", an <code>x</code> value of 315, and a <code>y</code> value of 380.");'
|
||||
- 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", "The fourth label should have text of "79, 411", an <code>x</code> value of 84, and a <code>y</code> value of 89.");'
|
||||
- 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", "The fifth label should have text of "420, 220", an <code>x</code> value of 425, and a <code>y</code> value of 280.");'
|
||||
- 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", "The sixth label should have text of "233, 145", an <code>x</code> value of 238, and a <code>y</code> value of 355.");'
|
||||
- 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", "The seventh label should have text of "333, 96", an <code>x</code> value of 338, and a <code>y</code> value of 404.");'
|
||||
- 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", "The eighth label should have text of "222, 333", an <code>x</code> value of 227, and a <code>y</code> value of 167.");'
|
||||
- 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", "The ninth label should have text of "78, 320", an <code>x</code> value of 83, and a <code>y</code> value of 180.");'
|
||||
- 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", "The tenth label should have text of "21, 123", an <code>x</code> value of 26, and a <code>y</code> value of 377.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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")
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc7
|
||||
title: Change Styles Based on Data
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
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>
|
||||
|
||||
## Instructions
|
||||
<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>的红色。
|
||||
testString: 'assert($("h2").eq(0).css("color") == "rgb(255, 0, 0)", "The first <code>h2</code> should have a <code>color</code> of red.");'
|
||||
- text: 第二<code>h2</code>应该有一个<code>color</code>的绿色。
|
||||
testString: 'assert($("h2").eq(1).css("color") == "rgb(0, 128, 0)", "The second <code>h2</code> should have a <code>color</code> of green.");'
|
||||
- text: 第三<code>h2</code>应该有一个<code>color</code>的绿色。
|
||||
testString: 'assert($("h2").eq(2).css("color") == "rgb(0, 128, 0)", "The third <code>h2</code> should have a <code>color</code> of green.");'
|
||||
- text: 第四<code>h2</code>应该有一个<code>color</code>的红色。
|
||||
testString: 'assert($("h2").eq(3).css("color") == "rgb(255, 0, 0)", "The fourth <code>h2</code> should have a <code>color</code> of red.");'
|
||||
- text: 第五<code>h2</code>应该有一个<code>color</code>的绿色。
|
||||
testString: 'assert($("h2").eq(4).css("color") == "rgb(0, 128, 0)", "The fifth <code>h2</code> should have a <code>color</code> of green.");'
|
||||
- text: 第六<code>h2</code>应该有一个<code>color</code>的红色。
|
||||
testString: 'assert($("h2").eq(5).css("color") == "rgb(255, 0, 0)", "The sixth <code>h2</code> should have a <code>color</code> of red.");'
|
||||
- text: 第七<code>h2</code>应该有一个<code>color</code>的绿色。
|
||||
testString: 'assert($("h2").eq(6).css("color") == "rgb(0, 128, 0)", "The seventh <code>h2</code> should have a <code>color</code> of green.");'
|
||||
- text: 第八<code>h2</code>应该有一个<code>color</code>的红色。
|
||||
testString: 'assert($("h2").eq(7).css("color") == "rgb(255, 0, 0)", "The eighth <code>h2</code> should have a <code>color</code> of red.");'
|
||||
- text: 第九<code>h2</code>应该有一个<code>color</code>的红色。
|
||||
testString: 'assert($("h2").eq(8).css("color") == "rgb(255, 0, 0)", "The ninth <code>h2</code> should have a <code>color</code> of red.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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"))
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bd1
|
||||
title: Change the Color of an SVG Element
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: 更改SVG元素的颜色
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">条形图位于正确的位置，但它们都是相同的黑色。 SVG有办法改变条形的颜色。在SVG中， <code>rect</code>形状使用<code>fill</code>属性着色。它支持十六进制代码，颜色名称和rgb值，以及更复杂的选项，如渐变和透明度。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">添加<code>attr()</code>方法将所有条形的“填充”设置为颜色“海军蓝”。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 这些酒吧都应该有海军蓝的<code>fill</code>颜色。
|
||||
testString: 'assert($("rect").css("fill") == "rgb(0, 0, 128)", "The bars should all have a <code>fill</code> color of navy.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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)
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bca
|
||||
title: Change the Presentation of a Bar Chart
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: 更改条形图的演示文稿
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">最后一个挑战创建了一个条形图，但有几个格式更改可以改善它：1）在每个条之间添加空格以在视觉上分隔它们，这是通过为<code>bar</code>类添加边距来完成的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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- 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", "The first <code>div</code> should have a <code>height</code> of 120 pixels and a <code>margin</code> of 2 pixels.");'
|
||||
- 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", "The second <code>div</code> should have a <code>height</code> of 310 pixels and a <code>margin</code> of 2 pixels.");'
|
||||
- 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", "The third <code>div</code> should have a <code>height</code> of 220 pixels and a <code>margin</code> of 2 pixels.");'
|
||||
- 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", "The fourth <code>div</code> should have a <code>height</code> of 170 pixels and a <code>margin</code> of 2 pixels.");'
|
||||
- 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", "The fifth <code>div</code> should have a <code>height</code> of 250 pixels and a <code>margin</code> of 2 pixels.");'
|
||||
- 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", "The sixth <code>div</code> should have a <code>height</code> of 180 pixels and a <code>margin</code> of 2 pixels.");'
|
||||
- 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", "The seventh <code>div</code> should have a <code>height</code> of 290 pixels and a <code>margin</code> of 2 pixels.");'
|
||||
- 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", "The eighth <code>div</code> should have a <code>height</code> of 140 pixels and a <code>margin</code> of 2 pixels.");'
|
||||
- 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", "The ninth <code>div</code> should have a <code>height</code> of 90 pixels and a <code>margin</code> of 2 pixels.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar {
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
/* Add your code below this line */
|
||||
|
||||
/* Add your code above this line */
|
||||
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")
|
||||
// Add your code below this line
|
||||
.style("height", (d) => (d + "px"))
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,80 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bcd
|
||||
title: Create a Bar for Each Data Point in the Set
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: 为集合中的每个数据点创建一个条
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## Instructions
|
||||
<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>元素。
|
||||
testString: 'assert($("rect").length == 9, "Your document should have 9 <code>rect</code> elements.");'
|
||||
- text: 您的代码应该使用<code>data()</code>方法。
|
||||
testString: 'assert(code.match(/\.data/g), "Your code should use the <code>data()</code> method.");'
|
||||
- text: 您的代码应使用<code>enter()</code>方法。
|
||||
testString: 'assert(code.match(/\.enter/g), "Your code should use the <code>enter()</code> method.");'
|
||||
- text: 您的代码应使用<code>append()</code>方法。
|
||||
testString: 'assert(code.match(/\.append/g), "Your code should use the <code>append()</code> method.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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")
|
||||
// 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>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bda
|
||||
title: Create a Linear Scale with D3
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">更改<code>scale</code>变量以创建线性比例。然后将<code>output</code>变量设置为使用输入参数50调用的比例。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>h2</code>的文本应为50。
|
||||
testString: 'assert($("h2").text() == "50", "The text in the <code>h2</code> should be 50.");'
|
||||
- text: 您的代码应使用<code>scaleLinear()</code>方法。
|
||||
testString: 'assert(code.match(/\.scaleLinear/g), "Your code should use the <code>scaleLinear()</code> method.");'
|
||||
- text: <code>output</code>变量应该使用参数50调用<code>scale</code> 。
|
||||
testString: 'assert(output == 50 && code.match(/scale\(\s*?50\s*?\)/g), "The <code>output</code> variable should call <code>scale</code> with an argument of 50.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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
|
||||
|
||||
// Add your code above this line
|
||||
|
||||
d3.select("body")
|
||||
.append("h2")
|
||||
.text(output);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bd7
|
||||
title: Create a Scatterplot with SVG Circles
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: 使用SVG圈创建散点图
|
||||
---
|
||||
|
||||
## Description
|
||||
<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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该有10个<code>circle</code>元素。
|
||||
testString: 'assert($("circle").length == 10, "Your code should have 10 <code>circle</code> elements.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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")
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bcc
|
||||
title: Display Shapes with SVG
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的文档应该有1个<code>rect</code>元素。
|
||||
testString: 'assert($("rect").length == 1, "Your document should have 1 <code>rect</code> element.");'
|
||||
- text: <code>rect</code>元素的<code>width</code>属性应设置为25。
|
||||
testString: 'assert($("rect").attr("width") == "25", "The <code>rect</code> element should have a <code>width</code> attribute set to 25.");'
|
||||
- text: <code>rect</code>元素的<code>height</code>属性应设置为100。
|
||||
testString: 'assert($("rect").attr("height") == "100", "The <code>rect</code> element should have a <code>height</code> attribute set to 100.");'
|
||||
- text: <code>rect</code>元素的<code>x</code>属性应设置为0。
|
||||
testString: 'assert($("rect").attr("x") == "0", "The <code>rect</code> element should have an <code>x</code> attribute set to 0.");'
|
||||
- text: <code>rect</code>元素的<code>y</code>属性应设置为0。
|
||||
testString: 'assert($("rect").attr("y") == "0", "The <code>rect</code> element should have a <code>y</code> attribute set to 0.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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)
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bcf
|
||||
title: Dynamically Change the Height of Each Bar
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: 动态改变每个栏的高度
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">每个条的高度可以设置为数组中数据点的值，类似于动态设置<code>x</code>值的方式。 <blockquote> selection.attr（“property”，（d，i）=> { <br> / * <br> * d是数据点值<br> * i是数组中数据点的索引<br> * / <br> }） </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<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。
|
||||
testString: 'assert($("rect").eq(0).attr("height") == "36", "The first <code>rect</code> should have a <code>height</code> of 36.");'
|
||||
- text: 第二个<code>rect</code>的<code>height</code>应为93。
|
||||
testString: 'assert($("rect").eq(1).attr("height") == "93", "The second <code>rect</code> should have a <code>height</code> of 93.");'
|
||||
- text: 第三个<code>rect</code>的<code>height</code>应为66。
|
||||
testString: 'assert($("rect").eq(2).attr("height") == "66", "The third <code>rect</code> should have a <code>height</code> of 66.");'
|
||||
- text: 第四个<code>rect</code>的<code>height</code>应为51。
|
||||
testString: 'assert($("rect").eq(3).attr("height") == "51", "The fourth <code>rect</code> should have a <code>height</code> of 51.");'
|
||||
- text: 第五个<code>rect</code>的<code>height</code>应为75。
|
||||
testString: 'assert($("rect").eq(4).attr("height") == "75", "The fifth <code>rect</code> should have a <code>height</code> of 75.");'
|
||||
- text: 第六个<code>rect</code>的<code>height</code>应为54。
|
||||
testString: 'assert($("rect").eq(5).attr("height") == "54", "The sixth <code>rect</code> should have a <code>height</code> of 54.");'
|
||||
- text: 第七个<code>rect</code>的<code>height</code>应为87。
|
||||
testString: 'assert($("rect").eq(6).attr("height") == "87", "The seventh <code>rect</code> should have a <code>height</code> of 87.");'
|
||||
- text: 第八个<code>rect</code>应该有42的<code>height</code> 。
|
||||
testString: 'assert($("rect").eq(7).attr("height") == "42", "The eighth <code>rect</code> should have a <code>height</code> of 42.");'
|
||||
- text: 第九个<code>rect</code>的<code>height</code>应为27。
|
||||
testString: 'assert($("rect").eq(8).attr("height") == "27", "The ninth <code>rect</code> should have a <code>height</code> of 27.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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) => {
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bce
|
||||
title: Dynamically Set the Coordinates for Each Bar
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: 动态设置每个条形的坐标
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## Instructions
|
||||
<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。
|
||||
testString: 'assert($("rect").eq(0).attr("x") == "0", "The first <code>rect</code> should have an <code>x</code> value of 0.");'
|
||||
- text: 第二个<code>rect</code>的<code>x</code>值应为30。
|
||||
testString: 'assert($("rect").eq(1).attr("x") == "30", "The second <code>rect</code> should have an <code>x</code> value of 30.");'
|
||||
- text: 第三个<code>rect</code>的<code>x</code>值应为60。
|
||||
testString: 'assert($("rect").eq(2).attr("x") == "60", "The third <code>rect</code> should have an <code>x</code> value of 60.");'
|
||||
- text: 第四个<code>rect</code>的<code>x</code>值应为90。
|
||||
testString: 'assert($("rect").eq(3).attr("x") == "90", "The fourth <code>rect</code> should have an <code>x</code> value of 90.");'
|
||||
- text: 第五个<code>rect</code>的<code>x</code>值应为120。
|
||||
testString: 'assert($("rect").eq(4).attr("x") == "120", "The fifth <code>rect</code> should have an <code>x</code> value of 120.");'
|
||||
- text: 第六个<code>rect</code>的<code>x</code>值应为150。
|
||||
testString: 'assert($("rect").eq(5).attr("x") == "150", "The sixth <code>rect</code> should have an <code>x</code> value of 150.");'
|
||||
- text: 第七个<code>rect</code>的<code>x</code>值应为180。
|
||||
testString: 'assert($("rect").eq(6).attr("x") == "180", "The seventh <code>rect</code> should have an <code>x</code> value of 180.");'
|
||||
- text: 第八个<code>rect</code>的<code>x</code>值应为210。
|
||||
testString: 'assert($("rect").eq(7).attr("x") == "210", "The eighth <code>rect</code> should have an <code>x</code> value of 210.");'
|
||||
- text: 第九个<code>rect</code>的<code>x</code>值应为240。
|
||||
testString: 'assert($("rect").eq(8).attr("x") == "240", "The ninth <code>rect</code> should have an <code>x</code> value of 240.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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) => {
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
})
|
||||
.attr("y", 0)
|
||||
.attr("width", 25)
|
||||
.attr("height", 100);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bd0
|
||||
title: Invert SVG Elements
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: 反转SVG元素
|
||||
---
|
||||
|
||||
## Description
|
||||
undefined
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 第一个<code>rect</code>的<code>y</code>值应为64。
|
||||
testString: 'assert($("rect").eq(0).attr("y") == h - (dataset[0] * 3), "The first <code>rect</code> should have a <code>y</code> value of 64.");'
|
||||
- text: 第二个<code>rect</code>的<code>y</code>值应为7。
|
||||
testString: 'assert($("rect").eq(1).attr("y") == h - (dataset[1] * 3), "The second <code>rect</code> should have a <code>y</code> value of 7.");'
|
||||
- text: 第三个<code>rect</code>的<code>y</code>值应为34。
|
||||
testString: 'assert($("rect").eq(2).attr("y") == h - (dataset[2] * 3), "The third <code>rect</code> should have a <code>y</code> value of 34.");'
|
||||
- text: 第四个<code>rect</code>的<code>y</code>值应为49。
|
||||
testString: 'assert($("rect").eq(3).attr("y") == h - (dataset[3] * 3), "The fourth <code>rect</code> should have a <code>y</code> value of 49.");'
|
||||
- text: 第五个<code>rect</code>的<code>y</code>值应为25。
|
||||
testString: 'assert($("rect").eq(4).attr("y") == h - (dataset[4] * 3), "The fifth <code>rect</code> should have a <code>y</code> value of 25.");'
|
||||
- text: 第六个<code>rect</code>的<code>y</code>值应为46。
|
||||
testString: 'assert($("rect").eq(5).attr("y") == h - (dataset[5] * 3), "The sixth <code>rect</code> should have a <code>y</code> value of 46.");'
|
||||
- text: 第七个<code>rect</code>的<code>y</code>值应为13。
|
||||
testString: 'assert($("rect").eq(6).attr("y") == h - (dataset[6] * 3), "The seventh <code>rect</code> should have a <code>y</code> value of 13.");'
|
||||
- text: 第八个<code>rect</code>的<code>y</code>值应为58。
|
||||
testString: 'assert($("rect").eq(7).attr("y") == h - (dataset[7] * 3), "The eighth <code>rect</code> should have a <code>y</code> value of 58.");'
|
||||
- text: 第九个<code>rect</code>的<code>y</code>值应为73。
|
||||
testString: 'assert($("rect").eq(8).attr("y") == h - (dataset[8] * 3), "The ninth <code>rect</code> should have a <code>y</code> value of 73.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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) => {
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
})
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => 3 * d);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bcb
|
||||
title: Learn About SVG in D3
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的文档应该有1个<code>svg</code>元素。
|
||||
testString: 'assert($("svg").length == 1, "Your document should have 1 <code>svg</code> element.");'
|
||||
- text: <code>svg</code>元素的<code>width</code>属性应设置为500。
|
||||
testString: 'assert($("svg").attr("width") == "500", "The <code>svg</code> element should have a <code>width</code> attribute set to 500.");'
|
||||
- text: <code>svg</code>元素的<code>height</code>属性应设置为100。
|
||||
testString: 'assert($("svg").attr("height") == "100", "The <code>svg</code> element should have a <code>height</code> attribute set to 100.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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")
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bc3
|
||||
title: Select a Group of Elements with D3
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
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>
|
||||
|
||||
## Instructions
|
||||
<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”。大写和间距应完全匹配。
|
||||
testString: 'assert($("li").text().match(/list item/g).length == 3, "There should be 3 <code>li</code> elements on the page, and the text in each one should say "list item". Capitalization and spacing should match exactly.");'
|
||||
- text: 您的代码应该访问<code>d3</code>对象。
|
||||
testString: 'assert(code.match(/d3/g), "Your code should access the <code>d3</code> object.");'
|
||||
- text: 您的代码应该使用<code>selectAll</code>方法。
|
||||
testString: 'assert(code.match(/\.selectAll/g), "Your code should use the <code>selectAll</code> method.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<ul>
|
||||
<li>Example</li>
|
||||
<li>Example</li>
|
||||
<li>Example</li>
|
||||
</ul>
|
||||
<script>
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bdb
|
||||
title: Set a Domain and a Range on a Scale
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应使用<code>domain()</code>方法。
|
||||
testString: 'assert(code.match(/\.domain/g), "Your code should use the <code>domain()</code> method.");'
|
||||
- text: '比例的<code>domain()</code>应设置为<code>[250, 500]</code> 。'
|
||||
testString: 'assert(JSON.stringify(scale.domain()) == JSON.stringify([250, 500]), "The <code>domain()</code> of the scale should be set to <code>[250, 500]</code>.");'
|
||||
- text: 您的代码应使用<code>range()</code>方法。
|
||||
testString: 'assert(code.match(/\.range/g), "Your code should use the <code>range()</code> method.");'
|
||||
- text: '刻度的<code>range()</code>应设置为<code>[10, 150]</code> 。'
|
||||
testString: 'assert(JSON.stringify(scale.range()) == JSON.stringify([10, 150]), "The <code>range()</code> of the scale should be set to <code>[10, 150]</code>.");'
|
||||
- text: <code>h2</code>的文本应为-102。
|
||||
testString: 'assert($("h2").text() == "-102", "The text in the <code>h2</code> should be -102.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,88 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd3
|
||||
title: Style D3 Labels
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: 风格D3标签
|
||||
---
|
||||
|
||||
## Description
|
||||
<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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 标签应该都具有红色的<code>fill</code>颜色。
|
||||
testString: 'assert($("text").css("fill") == "rgb(255, 0, 0)", "The labels should all have a <code>fill</code> color of red.");'
|
||||
- text: 标签应该都具有25像素的<code>font-size</code> 。
|
||||
testString: 'assert($("text").css("font-size") == "25px", "The labels should all have a <code>font-size</code> of 25 pixels.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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)
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bc9
|
||||
title: Update the Height of an Element Dynamically
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
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>
|
||||
|
||||
## Instructions
|
||||
<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像素。
|
||||
testString: 'assert($("div").eq(0).css("height") == "12px", "The first <code>div</code> should have a <code>height</code> of 12 pixels.");'
|
||||
- text: 第二个<code>div</code>的<code>height</code>应为31像素。
|
||||
testString: 'assert($("div").eq(1).css("height") == "31px", "The second <code>div</code> should have a <code>height</code> of 31 pixels.");'
|
||||
- text: 第三个<code>div</code>的<code>height</code>应为22像素。
|
||||
testString: 'assert($("div").eq(2).css("height") == "22px", "The third <code>div</code> should have a <code>height</code> of 22 pixels.");'
|
||||
- text: 第四个<code>div</code>的<code>height</code>应为17像素。
|
||||
testString: 'assert($("div").eq(3).css("height") == "17px", "The fourth <code>div</code> should have a <code>height</code> of 17 pixels.");'
|
||||
- text: 第五个<code>div</code>的<code>height</code>应为25像素。
|
||||
testString: 'assert($("div").eq(4).css("height") == "25px", "The fifth <code>div</code> should have a <code>height</code> of 25 pixels.");'
|
||||
- text: 第六个<code>div</code>的<code>height</code>应为18像素。
|
||||
testString: 'assert($("div").eq(5).css("height") == "18px", "The sixth <code>div</code> should have a <code>height</code> of 18 pixels.");'
|
||||
- text: 第七个<code>div</code>的<code>height</code>应为29像素。
|
||||
testString: 'assert($("div").eq(6).css("height") == "29px", "The seventh <code>div</code> should have a <code>height</code> of 29 pixels.");'
|
||||
- text: 第八个<code>div</code>的<code>height</code>应为14像素。
|
||||
testString: 'assert($("div").eq(7).css("height") == "14px", "The eighth <code>div</code> should have a <code>height</code> of 14 pixels.");'
|
||||
- text: 第九个<code>div</code>的<code>height</code>应为9像素。
|
||||
testString: 'assert($("div").eq(8).css("height") == "9px", "The ninth <code>div</code> should have a <code>height</code> of 9 pixels.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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")
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,147 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bde
|
||||
title: Use a Pre-Defined Scale to Place Elements
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该有10个<code>circle</code>元素。
|
||||
testString: 'assert($("circle").length == 10, "Your code should have 10 <code>circle</code> elements.");'
|
||||
- text: 应用刻度后，第一个<code>circle</code>元素应具有大约91的<code>cx</code>值和大约368的<code>cy</code>值。它的<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", "The first <code>circle</code> element should have a <code>cx</code> value of approximately 91 and a <code>cy</code> value of approximately 368 after applying the scales. It should also have an <code>r</code> value of 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", "The second <code>circle</code> element should have a <code>cx</code> value of approximately 159 and a <code>cy</code> value of approximately 181 after applying the scales. It should also have an <code>r</code> value of 5.");'
|
||||
- text: 应用刻度后，第三个<code>circle</code>元素应具有约340的<code>cx</code>值和约329的<code>cy</code>值。它的<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", "The third <code>circle</code> element should have a <code>cx</code> value of approximately 340 and a <code>cy</code> value of approximately 329 after applying the scales. It should also have an <code>r</code> value of 5.");'
|
||||
- text: 应用刻度后，第四个<code>circle</code>元素应具有大约131的<code>cx</code>值和大约60的<code>cy</code>值。它的<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", "The fourth <code>circle</code> element should have a <code>cx</code> value of approximately 131 and a <code>cy</code> value of approximately 60 after applying the scales. It should also have an <code>r</code> value of 5.");'
|
||||
- text: 应用刻度后，第五个<code>circle</code>元素应具有大约440的<code>cx</code>值和大约237的<code>cy</code>值。它的<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", "The fifth <code>circle</code> element should have a <code>cx</code> value of approximately 440 and a <code>cy</code> value of approximately 237 after applying the scales. It should also have an <code>r</code> value of 5.");'
|
||||
- text: 应用刻度后，第六个<code>circle</code>元素应具有约271的<code>cx</code>值和约306的<code>cy</code>值。它的<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", "The sixth <code>circle</code> element should have a <code>cx</code> value of approximately 271 and a <code>cy</code> value of approximately 306 after applying the scales. It should also have an <code>r</code> value of 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", "The seventh <code>circle</code> element should have a <code>cx</code> value of approximately 361 and a <code>cy</code> value of approximately 351 after applying the scales. It should also have an <code>r</code> value of 5.");'
|
||||
- text: 应用刻度后，第八个<code>circle</code>元素应具有约261的<code>cx</code>值和约132的<code>cy</code>值。它的<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", "The eighth <code>circle</code> element should have a <code>cx</code> value of approximately 261 and a <code>cy</code> value of approximately 132 after applying the scales. It should also have an <code>r</code> value of 5.");'
|
||||
- text: 应用刻度后，第九个<code>circle</code>元素应具有大约131的<code>cx</code>值和大约144的<code>cy</code>值。它的<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", "The ninth <code>circle</code> element should have a <code>cx</code> value of approximately 131 and a <code>cy</code> value of approximately 144 after applying the scales. It should also have an <code>r</code> value of 5.");'
|
||||
- text: 应用刻度后，第十个<code>circle</code>元素应具有大约79的<code>cx</code>值和大约326的<code>cy</code>值。它的<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", "The tenth <code>circle</code> element should have a <code>cx</code> value of approximately 79 and a <code>cy</code> value of approximately 326 after applying the scales. It should also have an <code>r</code> value of 5.");'
|
||||
- text: 您的代码应该有10个<code>text</code>元素。
|
||||
testString: 'assert($("text").length == 10, "Your code should have 10 <code>text</code> elements.");'
|
||||
- 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", "The first label should have an <code>x</code> value of approximately 100 and a <code>y</code> value of approximately 368 after applying the scales.");'
|
||||
- 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", "The second label should have an <code>x</code> value of approximately 168 and a <code>y</code> value of approximately 181 after applying the scales.");'
|
||||
- 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", "The third label should have an <code>x</code> value of approximately 350 and a <code>y</code> value of approximately 329 after applying the scales.");'
|
||||
- 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", "The fourth label should have an <code>x</code> value of approximately 141 and a <code>y</code> value of approximately 60 after applying the scales.");'
|
||||
- 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", "The fifth label should have an <code>x</code> value of approximately 449 and a <code>y</code> value of approximately 237 after applying the scales.");'
|
||||
- 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", "The sixth label should have an <code>x</code> value of approximately 280 and a <code>y</code> value of approximately 306 after applying the scales.");'
|
||||
- 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", "The seventh label should have an <code>x</code> value of approximately 370 and a <code>y</code> value of approximately 351 after applying the scales.");'
|
||||
- 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", "The eighth label should have an <code>x</code> value of approximately 270 and a <code>y</code> value of approximately 132 after applying the scales.");'
|
||||
- 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", "The ninth label should have an <code>x</code> value of approximately 140 and a <code>y</code> value of approximately 144 after applying the scales.");'
|
||||
- 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", "The tenth label should have an <code>x</code> value of approximately 88 and a <code>y</code> value of approximately 326 after applying the scales.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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")
|
||||
// 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>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bdd
|
||||
title: Use Dynamic Scales
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用<code>yScale</code>变量创建线性y轴刻度。域应该从零开始并转到集合中的最大y值。范围应使用SVG高度（ <code>h</code> ）并包括填充。 <strong>注意</strong> <br>记得保持情节正面朝上。设置y坐标的范围时，较高的值（高度减去填充）是第一个参数，较低的值是第二个参数。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>h2</code>的文本应为30。
|
||||
testString: 'assert(output == 30 && $("h2").text() == "30", "The text in the <code>h2</code> should be 30.");'
|
||||
- text: 'yScale的<code>domain()</code>应该等于<code>[0, 411]</code> 0,411 <code>[0, 411]</code> 。'
|
||||
testString: 'assert(JSON.stringify(yScale.domain()) == JSON.stringify([0, 411]), "The <code>domain()</code> of yScale should be equivalent to <code>[0, 411]</code>.");'
|
||||
- text: 'yScale的<code>range()</code>应相当于<code>[470, 30]</code> 470,30 <code>[470, 30]</code> 。'
|
||||
testString: 'assert(JSON.stringify(yScale.range()) == JSON.stringify([470, 30]), "The <code>range()</code> of yScale should be equivalent to <code>[470, 30]</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```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;
|
||||
|
||||
// Padding between the SVG canvas boundary and the plot
|
||||
const padding = 30;
|
||||
|
||||
// Create an x and y scale
|
||||
|
||||
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
|
||||
d3.select("body")
|
||||
.append("h2")
|
||||
.text(output)
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,66 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bdc
|
||||
title: Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a Dataset
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> <code>positionData</code>变量包含一个三维（3D）数组。使用D3方法从数组中查找z坐标（第三个值）的最大值，并将其保存在<code>output</code>变量中。 <strong>注意</strong> <br>有趣的事实 - D3可以绘制3D阵列。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>h2</code>的文本应为8。
|
||||
testString: 'assert(output == 8 && $("h2").text() == "8", "The text in the <code>h2</code> should be 8.");'
|
||||
- text: 您的代码应使用<code>max()</code>方法。
|
||||
testString: 'assert(code.match(/\.max/g), "Your code should use the <code>max()</code> method.")'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<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
|
||||
|
||||
// Add your code above this line
|
||||
|
||||
d3.select("body")
|
||||
.append("h2")
|
||||
.text(output)
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,67 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc4
|
||||
title: Work with Data in D3
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的文档应该有9个<code>h2</code>元素。
|
||||
testString: 'assert($("h2").length == 9, "Your document should have 9 <code>h2</code> elements.");'
|
||||
- text: <code>h2</code>元素中的文本应该是“New Title”。大写和间距应完全匹配。
|
||||
testString: 'assert($("h2").text().match(/New Title/g).length == 9, "The text in the <code>h2</code> elements should say "New Title". The capitalization and spacing should match exactly.");'
|
||||
- text: 您的代码应该使用<code>data()</code>方法。
|
||||
testString: 'assert(code.match(/\.data/g), "Your code should use the <code>data()</code> method.");'
|
||||
- text: 您的代码应使用<code>enter()</code>方法。
|
||||
testString: 'assert(code.match(/\.enter/g), "Your code should use the <code>enter()</code> method.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc5
|
||||
title: Work with Dynamic Data in D3
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">更改<code>text()</code>方法，以便每个<code>h2</code>元素显示<code>dataset</code>数组中具有单个空格和“USD”的相应值。例如，第一个标题应为“12美元”。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 第一个<code>h2</code>应该有“12美元”的文字。
|
||||
testString: 'assert($("h2").eq(0).text() == "12 USD", "The first <code>h2</code> should have the text "12 USD".");'
|
||||
- text: 第二个<code>h2</code>应该有“31美元”的文字。
|
||||
testString: 'assert($("h2").eq(1).text() == "31 USD", "The second <code>h2</code> should have the text "31 USD".");'
|
||||
- text: 第三个<code>h2</code>应该有“22美元”的文字。
|
||||
testString: 'assert($("h2").eq(2).text() == "22 USD", "The third <code>h2</code> should have the text "22 USD".");'
|
||||
- text: 第四个<code>h2</code>应该有“17美元”的文字。
|
||||
testString: 'assert($("h2").eq(3).text() == "17 USD", "The fourth <code>h2</code> should have the text "17 USD".");'
|
||||
- text: 第五个<code>h2</code>应该有“25美元”的文字。
|
||||
testString: 'assert($("h2").eq(4).text() == "25 USD", "The fifth <code>h2</code> should have the text "25 USD".");'
|
||||
- text: 第六个<code>h2</code>应该有“18美元”的文字。
|
||||
testString: 'assert($("h2").eq(5).text() == "18 USD", "The sixth <code>h2</code> should have the text "18 USD".");'
|
||||
- text: 第七个<code>h2</code>应该有“29美元”的文字。
|
||||
testString: 'assert($("h2").eq(6).text() == "29 USD", "The seventh <code>h2</code> should have the text "29 USD".");'
|
||||
- text: 第八个<code>h2</code>应该有“14美元”的文字。
|
||||
testString: 'assert($("h2").eq(7).text() == "14 USD", "The eighth <code>h2</code> should have the text "14 USD".");'
|
||||
- text: 第九个<code>h2</code>应该有“9美元”的文字。
|
||||
testString: 'assert($("h2").eq(8).text() == "9 USD", "The ninth <code>h2</code> should have the text "9 USD".");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("h2")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("h2")
|
||||
// Add your code below this line
|
||||
|
||||
.text("New Title");
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
Reference in New Issue
Block a user