chore(i18n,learn): processed translations (#44851)
This commit is contained in:
camperbot
GitHub
@ -0,0 +1,118 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd4
|
||||
title: D3 の要素にホバーエフェクトを追加する
|
||||
challengeType: 6
|
||||
forumTopicId: 301469
|
||||
dashedName: add-a-hover-effect-to-a-d3-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
ユーザーがバーにマウスカーソルを合わせた時にバーがハイライトされるように、効果を追加することができます。 これまでのところ、長方形のスタイリングには D3 と SVG の組み込みメソッドが適用されていますが、CSS も使用できます。
|
||||
|
||||
`attr()` メソッドを使用して、CSS クラスを SVG 要素に設定します。 その後、新しいクラスの `:hover` 疑似クラスによって、あらゆるホバーエフェクトのスタイルルールが保持されます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`attr()`メソッドを使用して `bar` クラスをすべての `rect` 要素に追加してください。 これによって、バーにマウスカーソルを合わせたときにバーの `fill` の 色が茶色に変わります。
|
||||
|
||||
# --hints--
|
||||
|
||||
`rect` 要素には `bar` のクラスが必要です。
|
||||
|
||||
```js
|
||||
assert($('rect').attr('class').trim().split(/\s+/g).includes('bar'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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
|
||||
.attr('class', 'bar')
|
||||
// Add your code above this line
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.text((d) => d)
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - (3 * d) - 3);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,175 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd6
|
||||
title: D3 の要素にツールチップを追加する
|
||||
challengeType: 6
|
||||
forumTopicId: 301470
|
||||
dashedName: add-a-tooltip-to-a-d3-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
ツールチップは、ユーザーがアイテムにカーソルを合わせたときにそのアイテムに関する詳しい情報を表示します。 視覚化にツールチップを追加する方法はいくつかあります。このチャレンジでは、SVG の `title` 要素を使用します。
|
||||
|
||||
`title` と `text()` メソッドを組み合わせて、バーにデータを動的に追加します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
各 `rect` ノードの下に `title` 要素を追加してください。 次に、コールバック関数で `text()` メソッドを呼び出すことでデータ値をテキストで表示してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
9 個の `title` 要素が必要です。
|
||||
|
||||
```js
|
||||
assert($('title').length == 9);
|
||||
```
|
||||
|
||||
最初の `title` 要素にはツールチップテキスト `12` が必要です。
|
||||
|
||||
```js
|
||||
assert($('title').eq(0).text() == '12');
|
||||
```
|
||||
|
||||
2 番目の `title` 要素にはツールチップテキスト `31` が必要です。
|
||||
|
||||
```js
|
||||
assert($('title').eq(1).text() == '31');
|
||||
```
|
||||
|
||||
3 番目の `title` 要素にはツールチップテキスト `22` が必要です。
|
||||
|
||||
```js
|
||||
assert($('title').eq(2).text() == '22');
|
||||
```
|
||||
|
||||
4 番目の `title` 要素にはツールチップテキスト `17` が必要です。
|
||||
|
||||
```js
|
||||
assert($('title').eq(3).text() == '17');
|
||||
```
|
||||
|
||||
5 番目の `title` 要素にはツールチップテキスト `25` が必要です。
|
||||
|
||||
```js
|
||||
assert($('title').eq(4).text() == '25');
|
||||
```
|
||||
|
||||
6 番目の `title` 要素にはツールチップテキスト `18` が必要です。
|
||||
|
||||
```js
|
||||
assert($('title').eq(5).text() == '18');
|
||||
```
|
||||
|
||||
7 番目の `title` 要素にはツールチップテキスト `29` が必要です。
|
||||
|
||||
```js
|
||||
assert($('title').eq(6).text() == '29');
|
||||
```
|
||||
|
||||
8 番目の `title` 要素にはツールチップテキスト `14` が必要です。
|
||||
|
||||
```js
|
||||
assert($('title').eq(7).text() == '14');
|
||||
```
|
||||
|
||||
9 番目の `title` 要素にはツールチップテキスト `9` が必要です。
|
||||
|
||||
```js
|
||||
assert($('title').eq(8).text() == '9');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar:hover {
|
||||
fill: brown;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => d * 3)
|
||||
.attr("fill", "navy")
|
||||
.attr("class", "bar")
|
||||
.append("title")
|
||||
.text((d) => d)
|
||||
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.text((d) => d)
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - (d * 3 + 3))
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,211 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bd8
|
||||
title: 円要素に属性を追加する
|
||||
challengeType: 6
|
||||
forumTopicId: 301471
|
||||
dashedName: add-attributes-to-the-circle-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
前回のチャレンジでは、`dataset` 内の各点に `circle` 要素を作成し、それらを SVG キャンバスに追加しました。 しかし D3 でこれらを正しく表示するには、各 `circle` の位置とサイズに関する詳細情報が必要です。
|
||||
|
||||
SVG の `circle` には主要な 3 つの属性があります。 `cx` と `cy` 属性は座標です。 これらは、SVG キャンバスのどこに図形の *center* を配置するかを指定します。 半径 (`r` 属性) は、`circle` の大きさを指定します。
|
||||
|
||||
`rect` `y` 座標と同様に、`circle` の `cy` 属性は SVG キャンバスの最下部からではなく最上部から測定します。
|
||||
|
||||
3 つの属性はすべてコールバック関数を使用して動的に値を設定できます。 留意点として、`data(dataset)` の後にチェーンされたすべてのメソッドは、`dataset` 内のアイテムごとに 1 回実行されます。 コールバック関数の `d` パラメータは、それぞれの点の配列である `dataset` 内の現在のアイテムを参照します。 `d[0]` のような角括弧表記を使用して、配列内の値にアクセスします。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`cx`、`cy`、および `r` 属性を `circle` 要素に追加してください。 `cx` の値は、`dataset` 内の各アイテムに対する配列の最初の数でなければなりません。 `cy` の値は配列の 2 番目の数値を基にする必要がありますが、チャートを逆さではなく正しい方向で表示してください。 すべての円の `r` の値を `5` にする必要があります。
|
||||
|
||||
# --hints--
|
||||
|
||||
10 個の `circle` 要素が必要です。
|
||||
|
||||
```js
|
||||
assert($('circle').length == 10);
|
||||
```
|
||||
|
||||
最初の `circle` 要素には `cx` 値 `34`、`cy` 値 `422`、`r` 値 `5` が必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('circle').eq(0).attr('cx') == '34' &&
|
||||
$('circle').eq(0).attr('cy') == '422' &&
|
||||
$('circle').eq(0).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
2 番目の `circle` 要素には `cx` 値 `109`、`cy` 値 `220`、`r` 値 `5` が必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('circle').eq(1).attr('cx') == '109' &&
|
||||
$('circle').eq(1).attr('cy') == '220' &&
|
||||
$('circle').eq(1).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
3 番目の `circle` 要素には `cx` 値 `310`、`cy` 値 `380`、`r` 値 `5` が必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('circle').eq(2).attr('cx') == '310' &&
|
||||
$('circle').eq(2).attr('cy') == '380' &&
|
||||
$('circle').eq(2).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
4 番目の `circle` 要素には `cx` 値 `79`、`cy` 値 `89`、`r` 値 `5` が必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('circle').eq(3).attr('cx') == '79' &&
|
||||
$('circle').eq(3).attr('cy') == '89' &&
|
||||
$('circle').eq(3).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
5 番目の `circle` 要素には `cx` 値 `420`、`cy` 値 `280`、`r` 値 `5` が必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('circle').eq(4).attr('cx') == '420' &&
|
||||
$('circle').eq(4).attr('cy') == '280' &&
|
||||
$('circle').eq(4).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
6 番目の `circle` 要素には `cx` 値 `233`、`cy` 値 `355`、`r` 値 `5` が必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('circle').eq(5).attr('cx') == '233' &&
|
||||
$('circle').eq(5).attr('cy') == '355' &&
|
||||
$('circle').eq(5).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
7 番目の `circle` 要素には `cx` 値 `333`、`cy` 値 `404`、`r` 値 `5` が必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('circle').eq(6).attr('cx') == '333' &&
|
||||
$('circle').eq(6).attr('cy') == '404' &&
|
||||
$('circle').eq(6).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
8 番目の `circle` 要素には `cx` 値 `222`、`cy` 値 `167`、`r` 値 `5` が必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('circle').eq(7).attr('cx') == '222' &&
|
||||
$('circle').eq(7).attr('cy') == '167' &&
|
||||
$('circle').eq(7).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
9 番目の `circle` 要素には `cx` 値 `78`、`cy` 値 `180`、`r` 値 `5` が必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('circle').eq(8).attr('cx') == '78' &&
|
||||
$('circle').eq(8).attr('cy') == '180' &&
|
||||
$('circle').eq(8).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
10 番目の `circle` 要素には `cx` 値 `21`、`cy` 値 `377`、`r` 値 `5` が必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('circle').eq(9).attr('cx') == '21' &&
|
||||
$('circle').eq(9).attr('cy') == '377' &&
|
||||
$('circle').eq(9).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("circle")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("circle")
|
||||
.attr("cx", (d) => d[0])
|
||||
.attr("cy", (d) => h - d[1])
|
||||
.attr("r", 5)
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,198 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512bdf
|
||||
title: 視覚化に軸を追加する
|
||||
challengeType: 6
|
||||
forumTopicId: 301472
|
||||
dashedName: add-axes-to-a-visualization
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
散布図を改善するもう一つの方法は、x 軸と y 軸を追加することです。
|
||||
|
||||
D3 には、y 軸と x 軸のそれぞれをレンダリングするための 2 つのメソッド、`axisLeft()` と `axisBottom()` があります。 以前のチャレンジでの `xScale` を基にして x 軸を作成する例を示します。
|
||||
|
||||
```js
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
```
|
||||
|
||||
次のステップでは、SVG キャンバス上で軸をレンダリングします。 これには、一般的な SVG コンポーネントである `g` 要素を使用できます。 `g` はグループを表します。 `rect`、`circle`、および `text` とは異なり、レンダリングされた軸は単なる直線です。 シンプルな形なので、`g` を使って作業できます。 最後のステップでは `transform` 属性を適用し、軸を SVG キャンバス上に正しく配置します。 そうしないと、直線は SVG キャンバスの境界線に沿ってレンダリングされて見えなくなります。 SVG は各種の `transforms` をサポートしていますが、軸の配置には `translate` が必要です。 それが `g` 要素に適用されると、与えられた量だけグループ全体が移動します。 次に例を示します。
|
||||
|
||||
```js
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
|
||||
svg.append("g")
|
||||
.attr("transform", "translate(0, " + (h - padding) + ")")
|
||||
.call(xAxis);
|
||||
```
|
||||
|
||||
上のコードは SVG キャンバスの最下部に x 軸を配置します。 次に、それが `call()` メソッドに引数として渡されます。 Y 軸も、`translate` 引数が `(x, 0)` の形式であること以外は同じように動作します。 `translate` は上の `attr()` メソッドの文字列なので、連結によって引数に変数値を含めることができます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
散布図に x 軸が追加されました。 `axisLeft()` メソッドを使用して、`yAxis` という名前の変数に y 軸を作成してください。 次に、`g` 要素を使用して軸をレンダリングしてください。 `transform` 属性を使用して、軸をパディング単位分だけ右へ、`0` 単位分だけ下へ、必ず移動してください。 軸を `call()` することも忘れないでください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`axisLeft()` メソッドを使用し、それに `yScale` を引数として渡す必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.axisLeft\(yScale\)/g));
|
||||
```
|
||||
|
||||
Y 軸の `g` 要素には、軸を `(60, 0)` で変換するための `transform` 属性が必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('g')
|
||||
.eq(10)
|
||||
.attr('transform')
|
||||
.match(/translate\(60\s*?,\s*?0\)/g)
|
||||
);
|
||||
```
|
||||
|
||||
`yAxis` を呼び出す必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.call\(\s*yAxis\s*\)/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
const padding = 60;
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[0])])
|
||||
.range([padding, w - padding]);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[1])])
|
||||
.range([h - padding, padding]);
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("circle")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("circle")
|
||||
.attr("cx", (d) => xScale(d[0]))
|
||||
.attr("cy",(d) => yScale(d[1]))
|
||||
.attr("r", (d) => 5);
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.text((d) => (d[0] + "," + d[1]))
|
||||
.attr("x", (d) => xScale(d[0] + 10))
|
||||
.attr("y", (d) => yScale(d[1]))
|
||||
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
|
||||
const yAxis = d3.axisLeft(yScale);
|
||||
|
||||
|
||||
svg.append("g")
|
||||
.attr("transform", "translate(0," + (h - padding) + ")")
|
||||
.call(xAxis);
|
||||
|
||||
svg.append("g")
|
||||
.attr("transform", "translate(" + padding + ",0)")
|
||||
.call(yAxis)
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc8
|
||||
title: D3 でクラスを追加する
|
||||
challengeType: 6
|
||||
forumTopicId: 301473
|
||||
dashedName: add-classes-with-d3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML 要素に多くのインラインスタイルを使用すると、小さなアプリでも管理が難しくなります。 CSS ルールを使用して、要素にクラスを追加しそのクラスのスタイルを指定するという作業を一度だけ行う方が簡単です。 D3 には、任意の HTML 属性 (クラス名など) を要素に追加する `attr()` メソッドがあります。
|
||||
|
||||
`attr()` メソッドは `style()` と同じように動作します。 このメソッドはカンマ区切りの値を取得します。また、コールバック関数を使用できます。 次のコードは、`container` のクラスを選択範囲に追加する例です。
|
||||
|
||||
```js
|
||||
selection.attr("class", "container");
|
||||
```
|
||||
|
||||
注意点として、クラスを追加する必要があり `container` パラメータのみが変更される場合は常に、`class` パラメータは同じままです。
|
||||
|
||||
# --instructions--
|
||||
|
||||
エディタ内のコードに `attr()` メソッドを追加し、`div` 要素に `bar` のクラスを追加してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`div` 要素には `bar` のクラスが必要です。
|
||||
|
||||
```js
|
||||
assert($('div').attr('class').trim().split(/\s+/g).includes('bar'));
|
||||
```
|
||||
|
||||
`attr()` メソッドを使用する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.attr/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar {
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("div")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("div")
|
||||
// Add your code below this line
|
||||
.attr("class","bar");
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bc2
|
||||
title: D3 でドキュメント要素を追加する
|
||||
challengeType: 6
|
||||
forumTopicId: 301474
|
||||
dashedName: add-document-elements-with-d3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
D3 には、ドキュメント内の要素を追加および変更するためのメソッドがいくつか用意されています。
|
||||
|
||||
`select()` メソッドはドキュメントから 1 つの要素を選択します。 このメソッドは、取得したい要素の名前に対する引数を取り、その名前と一致するドキュメント内の最初の要素に対する HTML ノードを返します。 次に例を示します。
|
||||
|
||||
```js
|
||||
const anchor = d3.select("a");
|
||||
```
|
||||
|
||||
上の例では、ページ上で最初のアンカータグを見つけ、それに対する HTML ノードを変数 `anchor` に保存します。 この選択範囲は他のメソッドでも使用できます。 この例の `d3` 部分は D3 オブジェクトへの参照であり、このようにして D3 メソッドにアクセスします。
|
||||
|
||||
他の 2 つの便利なメソッドは `append()` と `text()` です。
|
||||
|
||||
`append()` メソッドは、ドキュメントに追加したい要素の引数を取ります。 選択されたアイテムに HTML ノードを追加し、そのノードを参照するハンドルを返します。
|
||||
|
||||
`text()` メソッドは、選択されたノードのテキストを設定するか、現在のテキストを取得します。 値を設定するには、メソッドの括弧内の引数として文字列を渡します。
|
||||
|
||||
下の例では、順序なしリストを選択し、リストアイテムを追加し、テキストを追加しています。
|
||||
|
||||
```js
|
||||
d3.select("ul")
|
||||
.append("li")
|
||||
.text("Very important item");
|
||||
```
|
||||
|
||||
D3 では、ピリオドを使用して複数のメソッドをチェーンすると、多数のアクションを連続して実行できます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`select` メソッドを使用して、ドキュメント内の `body` タグを選択してください。 次に、`h1` タグを `append` し、テキスト "`Learning D3`" を `h1` 要素に追加してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`body` には `h1` 要素が 1 つ必要です。
|
||||
|
||||
```js
|
||||
assert($('body').children('h1').length == 1);
|
||||
```
|
||||
|
||||
`h1` 要素にはテキスト `Learning D3` が必要です。
|
||||
|
||||
```js
|
||||
assert($('h1').text() == 'Learning D3');
|
||||
```
|
||||
|
||||
`d3` オブジェクトにアクセスする必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/d3/g));
|
||||
```
|
||||
|
||||
`select` メソッドを使用する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.select/g));
|
||||
```
|
||||
|
||||
`append` メソッドを使用する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.append/g));
|
||||
```
|
||||
|
||||
`text` メソッドを使用する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.text/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
d3.select("body")
|
||||
.append("h1")
|
||||
.text("Learning D3")
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc6
|
||||
title: 要素にインラインスタイルを追加する
|
||||
challengeType: 6
|
||||
forumTopicId: 301475
|
||||
dashedName: add-inline-styling-to-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
D3 では、`style()` メソッドを使用して動的要素にインライン CSS スタイルを追加することができます。
|
||||
|
||||
`style()` メソッドは、カンマ区切りのキーと値のペアを引数に取ります。 選択したテキストの色を青に設定する例を下に示します。
|
||||
|
||||
```js
|
||||
selection.style("color","blue");
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
`style()` メソッドをエディタ内のコードに追加することにより、表示されるすべてのテキストに `verdana` の `font-family` を設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h2` 要素に `verdana` の `font-family` を設定する必要があります。
|
||||
|
||||
```js
|
||||
assert($('h2').css('font-family') == 'verdana');
|
||||
```
|
||||
|
||||
`style()` メソッドを使用する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.style/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("h2")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("h2")
|
||||
.text((d) => (d + " USD"))
|
||||
.style("font-family", "verdana")
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,153 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd2
|
||||
title: D3 の要素にラベルを追加する
|
||||
challengeType: 6
|
||||
forumTopicId: 301476
|
||||
dashedName: add-labels-to-d3-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
D3 では、SVG `text` 要素を使用して、バーなどのグラフ要素にラベルを付けることができます。
|
||||
|
||||
`rect` 要素と同様に、`text` 要素を SVG キャンバスに配置するにはこの要素に `x` 属性と `y` 属性が必要です。 これらの値を表示するにはデータへのアクセスも必要です。
|
||||
|
||||
D3 では、バーにラベルを付ける方法を高度にコントロールできます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
エディタ内のコードは、新しい `text` 要素のそれぞれにデータをバインド済みです。 まず、`text` ノードを `svg` に追加してください。 次に、`x` 座標と `y` 座標の属性を追加してください。 これらは `rect` 要素と同じ方法で計算される必要がありますが、例外として、`text` の `y` 値は、ラベルがバーよりも 3 単位高くなるように設定する必要があります。 最後に、D3 `text()` メソッドを使用して、ラベルがデータポイント値と等しくなるように設定してください。
|
||||
|
||||
**注:** ラベルをバーよりも高くするために、`text` の `y` 値をバーの `y` 値より 3 単位大きくすべきか、3 単位小さくすべきかを決定します。
|
||||
|
||||
# --hints--
|
||||
|
||||
最初の `text` 要素はラベルが `12`、`y` 値が `61` であることが必要です。
|
||||
|
||||
```js
|
||||
assert($('text').eq(0).text() == '12' && $('text').eq(0).attr('y') == '61');
|
||||
```
|
||||
|
||||
2 番目の `text` 要素は ラベルが `31`、`y` 値が `4` であることが必要です。
|
||||
|
||||
```js
|
||||
assert($('text').eq(1).text() == '31' && $('text').eq(1).attr('y') == '4');
|
||||
```
|
||||
|
||||
3 番目の `text` 要素はラベルが `22`、`y` 値が `31` であることが必要です。
|
||||
|
||||
```js
|
||||
assert($('text').eq(2).text() == '22' && $('text').eq(2).attr('y') == '31');
|
||||
```
|
||||
|
||||
4 番目の `text` 要素は ラベルが `17`、`y` 値が `46` であることが必要です。
|
||||
|
||||
```js
|
||||
assert($('text').eq(3).text() == '17' && $('text').eq(3).attr('y') == '46');
|
||||
```
|
||||
|
||||
5 番目の `text` 要素はラベルが `25`、`y` 値が `22` であることが必要です。
|
||||
|
||||
```js
|
||||
assert($('text').eq(4).text() == '25' && $('text').eq(4).attr('y') == '22');
|
||||
```
|
||||
|
||||
6 番目の `text` 要素はラベルが `18`、`y` 値が `43` であることが必要です。
|
||||
|
||||
```js
|
||||
assert($('text').eq(5).text() == '18' && $('text').eq(5).attr('y') == '43');
|
||||
```
|
||||
|
||||
7 番目の `text` 要素はラベルが `29`、`y` 値が `10` であることが必要です。
|
||||
|
||||
```js
|
||||
assert($('text').eq(6).text() == '29' && $('text').eq(6).attr('y') == '10');
|
||||
```
|
||||
|
||||
8 番目の `text` 要素はラベルが `14`、`y` 値が `55` であることが必要です。
|
||||
|
||||
```js
|
||||
assert($('text').eq(7).text() == '14' && $('text').eq(7).attr('y') == '55');
|
||||
```
|
||||
|
||||
9 番目の `text` 要素は ラベルが `9`、`y` 値が `70` であることが必要です。
|
||||
|
||||
```js
|
||||
assert($('text').eq(8).text() == '9' && $('text').eq(8).attr('y') == '70');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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()
|
||||
.append("text")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - (3 * d) - 3)
|
||||
.text((d) => d)
|
||||
</script>
|
||||
<body>
|
||||
```
|
||||
@ -0,0 +1,224 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bd9
|
||||
title: 散布図の円にラベルを追加する
|
||||
challengeType: 6
|
||||
forumTopicId: 301477
|
||||
dashedName: add-labels-to-scatter-plot-circles
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
散布図の点のラベルを作成するために、テキストを追加することができます。
|
||||
|
||||
目標は、`dataset` 内の各アイテムの 1 つ目 (`x`) と 2 つ目 (`y`) のフィールドのカンマ区切り値を表示することです。
|
||||
|
||||
`text` ノードを SVG キャンバス上に配置するには `x` 属性と `y` 属性が必要です。 このチャレンジでは、(高さを決定する) `y` 値には、`circle` が `cy` 属性に対して使用するものと同じ値を使用できます。 `x` 値は、ラベルが見えるように、`circle` の `cx` 値よりも若干大きくすることができます。 これにより、プロットされた点の右側にラベルが移動します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`text` 要素を使用して、散布図上の各点にラベルを付けてください。 ラベルのテキストは、1 つのカンマと 1 つのスペースで区切られた 2 つの値にする必要があります。 たとえば、最初の点のラベルは `34, 78` です。 `circle` 上の `cx` 属性に使用した値よりも `5` 単位大きくなるように、`x` 属性を設定してください。 `y` 属性を、`circle` の `cy` 値に使用したのと同じ方法で設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
10 個の `text` 要素が必要です。
|
||||
|
||||
```js
|
||||
assert($('text').length == 10);
|
||||
```
|
||||
|
||||
最初のラベルはテキストを `34, 78` 、`x` 値を`39`、そして `y` 値を `422` にする必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('text').eq(0).text() == '34, 78' &&
|
||||
$('text').eq(0).attr('x') == '39' &&
|
||||
$('text').eq(0).attr('y') == '422'
|
||||
);
|
||||
```
|
||||
|
||||
2 番目のラベルはテキストを `109, 280` 、`x` 値を `114`、そして `y` 値を `220` にする必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('text').eq(1).text() == '109, 280' &&
|
||||
$('text').eq(1).attr('x') == '114' &&
|
||||
$('text').eq(1).attr('y') == '220'
|
||||
);
|
||||
```
|
||||
|
||||
3 番目のラベルはテキストを `310, 120` 、`x` 値を `315`、そして `y` 値を `380` にする必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('text').eq(2).text() == '310, 120' &&
|
||||
$('text').eq(2).attr('x') == '315' &&
|
||||
$('text').eq(2).attr('y') == '380'
|
||||
);
|
||||
```
|
||||
|
||||
4 番目のラベルはテキストを `79, 411` 、`x` 値を `84`、そして `y` 値を `89` にする必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('text').eq(3).text() == '79, 411' &&
|
||||
$('text').eq(3).attr('x') == '84' &&
|
||||
$('text').eq(3).attr('y') == '89'
|
||||
);
|
||||
```
|
||||
|
||||
5 番目のラベルはテキストを `420, 220` 、`x` 値を `425`、そして `y` 値を `280` にする必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('text').eq(4).text() == '420, 220' &&
|
||||
$('text').eq(4).attr('x') == '425' &&
|
||||
$('text').eq(4).attr('y') == '280'
|
||||
);
|
||||
```
|
||||
|
||||
6 番目のラベルはテキストを `233, 145` 、`x` 値を `238`、そして `y` 値を `355` にする必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('text').eq(5).text() == '233, 145' &&
|
||||
$('text').eq(5).attr('x') == '238' &&
|
||||
$('text').eq(5).attr('y') == '355'
|
||||
);
|
||||
```
|
||||
|
||||
7 番目のラベルはテキストを `333, 96` 、`x` 値を `338`、そして `y` 値を `404` にする必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('text').eq(6).text() == '333, 96' &&
|
||||
$('text').eq(6).attr('x') == '338' &&
|
||||
$('text').eq(6).attr('y') == '404'
|
||||
);
|
||||
```
|
||||
|
||||
8 番目のラベルはテキストを `222, 333`、`x` 値を `227`、そして `y` 値を `167` にする必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('text').eq(7).text() == '222, 333' &&
|
||||
$('text').eq(7).attr('x') == '227' &&
|
||||
$('text').eq(7).attr('y') == '167'
|
||||
);
|
||||
```
|
||||
|
||||
9 番目のラベルはテキストを `78, 320` 、`x` 値を `83`、そして `y` 値を `180` にする必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('text').eq(8).text() == '78, 320' &&
|
||||
$('text').eq(8).attr('x') == '83' &&
|
||||
$('text').eq(8).attr('y') == '180'
|
||||
);
|
||||
```
|
||||
|
||||
10 番目のラベルはテキストを `21, 123` 、`x` 値を `26`、そして `y` 値を `377` にする必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('text').eq(9).text() == '21, 123' &&
|
||||
$('text').eq(9).attr('x') == '26' &&
|
||||
$('text').eq(9).attr('y') == '377'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("circle")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("circle")
|
||||
.attr("cx", (d, i) => d[0])
|
||||
.attr("cy", (d, i) => h - d[1])
|
||||
.attr("r", 5);
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.attr("x", (d) => d[0] + 5)
|
||||
.attr("y", (d) => h - d[1])
|
||||
.text((d) => (d[0] + ", " + d[1]))
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,123 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc7
|
||||
title: データに基づいてスタイルを変更する
|
||||
challengeType: 6
|
||||
forumTopicId: 301479
|
||||
dashedName: change-styles-based-on-data
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
D3 は、データを可視化して適切に提示するためのものです。 データに基づいて要素のスタイルを変更したい場合があるでしょう。 `style()` メソッドでコールバック関数を使用すれば、要素ごとにスタイルを変更できます。
|
||||
|
||||
例えば、値が 20 未満のデータポイントは青色に、そうでない場合は赤色にすることができます。 `style()` メソッドでコールバック関数を使用し、条件付きロジックを含めることができます。 コールバック関数は、次のように `d` パラメータを使用してデータポイントを表します。
|
||||
|
||||
```js
|
||||
selection.style("color", (d) => {
|
||||
|
||||
});
|
||||
```
|
||||
|
||||
`style()` メソッドは `color` の設定に限定されるものではありません 。他の CSS プロパティでも使用できます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`style()` メソッドをエディタ内のコードに追加して、`h2` 要素の `color` を条件付きで設定してください。 データ値が 20 未満の場合は赤を返し、そうでない場合は緑を返すようなコールバック関数を記述してください。
|
||||
|
||||
**注:** if-else ロジックまたは三項演算子を使用できます。
|
||||
|
||||
# --hints--
|
||||
|
||||
最初の `h2` の `color` を赤にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('h2').eq(0).css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
2 番目の `h2` の `color` を緑にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('h2').eq(1).css('color') == 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
3 番目の `h2` の `color` を緑にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('h2').eq(2).css('color') == 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
4 番目の `h2` の `color` を赤にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('h2').eq(3).css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
5 番目の `h2` の `color` を緑にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('h2').eq(4).css('color') == 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
6 番目の `h2` の `color` を赤にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('h2').eq(5).css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
7 番目の `h2` の `color` を緑にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('h2').eq(6).css('color') == 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
8 番目の `h2` の `color` を赤にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('h2').eq(7).css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
9 番目の `h2` の `color` を赤にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('h2').eq(8).css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("h2")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("h2")
|
||||
.text((d) => (d + " USD"))
|
||||
.style("color", (d) => d < 20 ? "red" : "green")
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,88 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bd1
|
||||
title: SVG 要素の色を変更する
|
||||
challengeType: 6
|
||||
forumTopicId: 301480
|
||||
dashedName: change-the-color-of-an-svg-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
バーは正しい位置にありますが、すべて同じ黒色です。 SVG にはバーの色を変更する方法があります。
|
||||
|
||||
SVG では、`rect` 図形は `fill` 属性で色付けされます。 16 進コード、色名、rgb 値、さらにはグラデーションや透過性などの複雑なオプションもサポートしています。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`attr()` メソッドを追加して、すべてのバーの `fill` をネイビー色に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
すべてのバーの `fill` をネイビー色にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').css('fill') == 'rgb(0, 0, 128)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => 3 * d)
|
||||
.attr("fill", "navy");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,161 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bca
|
||||
title: 棒グラフの外観を変更する
|
||||
challengeType: 6
|
||||
forumTopicId: 301481
|
||||
dashedName: change-the-presentation-of-a-bar-chart
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
前回のチャレンジで棒グラフを作成しましたが、以下のフォーマット変更によりグラフが改善される可能性があります。
|
||||
|
||||
1) 各バーの間にスペースを追加して、バーを視覚的に分離します。これを行うには、`bar` クラスの CSS にマージンを追加します。
|
||||
|
||||
2) バーの高さを増すことで、値の違いを分かりやすくします。これを行うには、値に数値を乗じて高さを調整します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
まず、`style` タグ内の `bar` クラスに `2px` の `margin` を追加してください。 次に、`style()` メソッド内のコールバック関数を変更して、元のデータ値 (`px` を足したもの) の `10` 倍の値が返るようにしてください。
|
||||
|
||||
**注:** 各データポイントを *same* 定数で乗算すると、スケールのみが変更されます。 これはズームインするようなもので、基になっているデータの意味は変わりません。
|
||||
|
||||
# --hints--
|
||||
|
||||
最初の `div` では、`height` は `120` ピクセル、`margin` は `2` ピクセルであることが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div').eq(0).css('height') == '120px' &&
|
||||
$('div').eq(0).css('margin-right') == '2px'
|
||||
);
|
||||
```
|
||||
|
||||
2 番目の `div` では、`height` は `310` ピクセル、`margin` は `2` ピクセルであることが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div').eq(1).css('height') == '310px' &&
|
||||
$('div').eq(1).css('margin-right') == '2px'
|
||||
);
|
||||
```
|
||||
|
||||
3 番目の `div` では、`height` は `220` ピクセル、`margin` は `2` ピクセルであることが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div').eq(2).css('height') == '220px' &&
|
||||
$('div').eq(2).css('margin-right') == '2px'
|
||||
);
|
||||
```
|
||||
|
||||
4 番目の `div` では、`height` は `170` ピクセル、`margin` は `2` ピクセルであることが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div').eq(3).css('height') == '170px' &&
|
||||
$('div').eq(3).css('margin-right') == '2px'
|
||||
);
|
||||
```
|
||||
|
||||
5 番目の `div` では、`height` は `250` ピクセル、`margin` は `2` ピクセルであることが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div').eq(4).css('height') == '250px' &&
|
||||
$('div').eq(4).css('margin-right') == '2px'
|
||||
);
|
||||
```
|
||||
|
||||
6 番目の `div` では、`height` は `180` ピクセル、 `margin` は `2` ピクセルであることが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div').eq(5).css('height') == '180px' &&
|
||||
$('div').eq(5).css('margin-right') == '2px'
|
||||
);
|
||||
```
|
||||
|
||||
7 番目の `div` では、`height` は `290` ピクセル、`margin` は `2` ピクセルであることが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div').eq(6).css('height') == '290px' &&
|
||||
$('div').eq(6).css('margin-right') == '2px'
|
||||
);
|
||||
```
|
||||
|
||||
8 番目の `div` では、`height` は `140` ピクセル、`margin` は `2` ピクセルであることが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div').eq(7).css('height') == '140px' &&
|
||||
$('div').eq(7).css('margin-right') == '2px'
|
||||
);
|
||||
```
|
||||
|
||||
9 番目の `div` では、`height` は `90` ピクセル、`margin` は `2` ピクセルであることが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div').eq(8).css('height') == '90px' &&
|
||||
$('div').eq(8).css('margin-right') == '2px'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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")
|
||||
.style("height", (d) => (d + "px")) // Change this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar {
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
margin: 2px;
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("div")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("div")
|
||||
.attr("class", "bar")
|
||||
.style("height", (d) => (d * 10 + "px"))
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,110 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bcd
|
||||
title: セット内の各データポイントにバーを作成する
|
||||
challengeType: 6
|
||||
forumTopicId: 301482
|
||||
dashedName: create-a-bar-for-each-data-point-in-the-set
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
前回のチャレンジでは、バーを描くために `svg` 要素に長方形を 1 つだけ追加しました。 ここでは、`data()`、`enter()`、および SVG 図形についてこれまでに学んだ内容を組み合わせて、`dataset` 内の各データポイントに対して長方形を作成し追加します。
|
||||
|
||||
以前のチャレンジでは、`dataset` 内の各アイテムに対して `div` を作成し追加する方法について、次のようなフォーマットを示しました。
|
||||
|
||||
```js
|
||||
d3.select("body").selectAll("div")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("div")
|
||||
```
|
||||
|
||||
`div` 要素の代わりに `rect` 要素を使うと、いくつかの点で作業が異なります。 `rect` 要素は `body` に直接追加するのではなく、 `svg` 要素に追加する必要があります。 また、各 `rect` を `svg` 領域内のどこに置くかを D3 に指示する必要があります。 バーの配置については次のチャレンジで説明します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`data()`、`enter()`、`append()` の各メソッドを使用して、`dataset` 内の各アイテムに対して `rect` を作成し追加してください。 すべてのバーが重なり合った状態で表示されますが、これは次のチャレンジで修正します。
|
||||
|
||||
# --hints--
|
||||
|
||||
ドキュメントには 9 個の `rect` 要素が必要です。
|
||||
|
||||
```js
|
||||
assert($('rect').length == 9);
|
||||
```
|
||||
|
||||
`data()` メソッドを使用する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.data/g));
|
||||
```
|
||||
|
||||
`enter()` メソッドを使用する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.enter/g));
|
||||
```
|
||||
|
||||
`append()` メソッドを使用する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.append/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", 0)
|
||||
.attr("y", 0)
|
||||
.attr("width", 25)
|
||||
.attr("height", 100);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,88 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bda
|
||||
title: D3 で線形スケールを作成する
|
||||
challengeType: 6
|
||||
forumTopicId: 301483
|
||||
dashedName: create-a-linear-scale-with-d3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
棒グラフと散布図グラフは、どちらも直接 SVG キャンバスにプロットされています。 しかし、バーまたは 1 つのデータポイントの高さが SVG の高さや幅の値よりも大きいと、そのバーまたはデータポイントは SVG 領域からはみ出てしまいます。
|
||||
|
||||
D3では、データのプロットに役立つスケールがあります。 `scales` は、生のデータポイント群をどのように SVG キャンバスのピクセルにマッピングするかをプログラムに伝える関数です。
|
||||
|
||||
例えば、100 x 500 サイズの SVG キャンバスがあり、そこに多数の国の国内総生産 (GDP) をプロットするとします。 一連の数値の単位は 10 億ドルや 1 兆ドルの範囲になるでしょう。 大きな GDP 値を100 x 500 サイズの領域にどのように配置するかを伝えるために、スケールのタイプを D3 に提供します。
|
||||
|
||||
生データのままではプロットできなさそうです。 プロットする前にデータセット全体のスケールを設定することで、`x` と `y` の値をキャンバスの幅と高さに適合させます。
|
||||
|
||||
D3 にはいくつかのタイプのスケールがあります。 (通常は定量的データで使用される) 線形スケールの場合、`scaleLinear()` という D3 メソッドがあります。
|
||||
|
||||
```js
|
||||
const scale = d3.scaleLinear()
|
||||
```
|
||||
|
||||
デフォルトでは、スケールは同一関係を使用します。 つまり、入力値と出力値が同じです。 これを変更する方法については別のチャレンジで説明します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`scale` 変数を変更して線形スケールを作成してください。 次に、`output` 変数を、入力引数 `50` で呼び出されたスケールに設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h2` 内のテキストを `50` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('h2').text() == '50');
|
||||
```
|
||||
|
||||
`scaleLinear()` メソッドを使用する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.scaleLinear/g));
|
||||
```
|
||||
|
||||
`output` 変数は `scale` を引数 `50` で呼び出す必要があります。
|
||||
|
||||
```js
|
||||
assert(output == 50 && code.match(/scale\(\s*?50\s*?\)/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
// Add your code below this line
|
||||
|
||||
const scale = undefined; // Create the scale here
|
||||
const output = scale(); // Call scale with an argument here
|
||||
|
||||
// Add your code above this line
|
||||
|
||||
d3.select("body")
|
||||
.append("h2")
|
||||
.text(output);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
|
||||
const scale = d3.scaleLinear();
|
||||
const output = scale(50);
|
||||
|
||||
d3.select("body")
|
||||
.append("h2")
|
||||
.text(output);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bd7
|
||||
title: SVG 円で散布図を作成する
|
||||
challengeType: 6
|
||||
forumTopicId: 301484
|
||||
dashedName: create-a-scatterplot-with-svg-circles
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
散布図もデータ可視化の一種です。 通常、円を使用してデータポイントをマッピングし、それぞれの円が 2 つの値を持っています。 これらの値は `x` 軸と `y` 軸に結び付いており、視覚化において円の配置に使用されます。
|
||||
|
||||
SVG には円形を作成するための `circle` タグがあります。 このタグは、棒グラフに使用した `rect` 要素とよく似た働きをします。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`data()`、`enter()`、`append()` の各メソッドを使用して、`dataset` を、SVG キャンバスに追加される新しい `circle` 要素にバインドしてください。
|
||||
|
||||
**注:** まだ属性を設定していないため、円は表示されません。 次のチャレンジでそれを行います。
|
||||
|
||||
# --hints--
|
||||
|
||||
10 個の `circle` 要素が必要です。
|
||||
|
||||
```js
|
||||
assert($('circle').length == 10);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("circle")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("circle")
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bcc
|
||||
title: SVG で図形を表示する
|
||||
challengeType: 6
|
||||
forumTopicId: 301485
|
||||
dashedName: display-shapes-with-svg
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
前回のチャレンジでは、与えられた幅と高さで `svg` 要素を作成しました。これが表示されたのは、`style` タグ内でその要素に適用される `background-color` があったからです。 前回のコードでは、与えられた幅と高さのためのスペースを作りました。
|
||||
|
||||
次に行うことは、`svg` 領域に配置する図形の作成です。 SVG には、長方形や円など、サポートされている図形が数多くあります。 これらはデータを表示するために使用されます。 例えば、長方形 (`<rect>`) の SVG 図形で棒グラフのバーを作成できます。
|
||||
|
||||
`svg` 領域に図形を配置するときは、`x` 座標と `y` 座標に対応した位置を指定できます。 原点 (0, 0) は左上の隅にあります。 `x` が正の値であれば図形は原点から右へ移動し、`y` が正の値であれば図形は原点から下へ移動します。
|
||||
|
||||
前回のチャレンジで使用した 500 (幅) x 100 (高さ) の `svg` の中央に図形を置くには、`x` 座標を 250、`y` 座標を 50 に設定します。
|
||||
|
||||
SVG `rect` には 4 つの属性があります。 `x` 座標と `y` 座標は、`svg` 領域内で図形が置かれる位置を示します。 また、サイズを指定する `height` と `width` があります。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`append()` を使用して `rect` 図形を `svg` に加え、その `width` 属性を `25`、`height` 属性を `100` に設定してください。 また、`rect` `x` 属性と `y` 属性をそれぞれ `0` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
ドキュメントには 1 個の `rect` 要素が必要です。
|
||||
|
||||
```js
|
||||
assert($('rect').length == 1);
|
||||
```
|
||||
|
||||
`rect` 要素の `width` 属性を `25` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').attr('width') == '25');
|
||||
```
|
||||
|
||||
`rect` 要素の `height` 属性を `100` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').attr('height') == '100');
|
||||
```
|
||||
|
||||
`rect` 要素の `x` 属性を `0` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').attr('x') == '0');
|
||||
```
|
||||
|
||||
`rect` 要素の `y` 属性を `0` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').attr('y') == '0');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
.append("rect")
|
||||
.attr("width", 25)
|
||||
.attr("height", 100)
|
||||
.attr("x", 0)
|
||||
.attr("y", 0);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,145 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bcf
|
||||
title: 各バーの高さを動的に変更する
|
||||
challengeType: 6
|
||||
forumTopicId: 301486
|
||||
dashedName: dynamically-change-the-height-of-each-bar
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`x` の値を動的に設定したときと同様の方法で、各バーの高さを配列内のデータポイントの値に設定できます。
|
||||
|
||||
```js
|
||||
selection.attr("property", (d, i) => {
|
||||
|
||||
})
|
||||
```
|
||||
|
||||
ここでは `d` がデータポイント値、`i` が配列内のデータポイントのインデックスになります。
|
||||
|
||||
# --instructions--
|
||||
|
||||
データ値の 3 倍が返るように、`height` 属性のコールバック関数を変更してください。
|
||||
|
||||
**注:** 既に学んだように、すべてのデータポイントに同じ定数を乗算すると (ズームインのように) データが拡大されます。 それにより、この例にあるバーの値の違いが分かりやすくなります。
|
||||
|
||||
# --hints--
|
||||
|
||||
最初の `rect` は `height` を `36` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').eq(0).attr('height') == '36');
|
||||
```
|
||||
|
||||
2 番目の `rect` は `height` を `93` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').eq(1).attr('height') == '93');
|
||||
```
|
||||
|
||||
3 番目の `rect` は `height` を `66` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').eq(2).attr('height') == '66');
|
||||
```
|
||||
|
||||
4 番目の `rect` は `height` を `51` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').eq(3).attr('height') == '51');
|
||||
```
|
||||
|
||||
5 番目の `rect` は `height` を `75` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').eq(4).attr('height') == '75');
|
||||
```
|
||||
|
||||
6 番目の `rect` は `height` を `54` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').eq(5).attr('height') == '54');
|
||||
```
|
||||
|
||||
7 番目の `rect` は `height` を `87` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').eq(6).attr('height') == '87');
|
||||
```
|
||||
|
||||
8 番目の `rect` は `height` を `42` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').eq(7).attr('height') == '42');
|
||||
```
|
||||
|
||||
9 番目の `rect` は `height` を `27` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').eq(8).attr('height') == '27');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", 0)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => {
|
||||
return d * 3
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,151 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bce
|
||||
title: 各バーの座標を動的に設定する
|
||||
challengeType: 6
|
||||
forumTopicId: 301487
|
||||
dashedName: dynamically-set-the-coordinates-for-each-bar
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
前回のチャレンジでは、長方形を作成し、それを `dataset` 内の各ポイントの `svg` 要素に追加することでバーを描きました。 しかし残念ながら、すべてのバーが重なり合っていました。
|
||||
|
||||
長方形の配置は `x` 属性と `y` 属性で処理されます。 これらの属性は、`svg` 領域内のどこから図形を描き始めるかを D3 に指示します。 前回のチャレンジではそれぞれ 0 に設定されたので、すべてのバーが左上隅に配置されました。
|
||||
|
||||
棒グラフの場合、すべてのバーの垂直方向の位置がそろっている必要があります。つまり、`y` の値はすべてのバーで同じ値 (0) に固定されます。 一方、`x` の値は、新しいバーを追加する際に変更される必要があります。 `x` の値が大きいほどアイテムが右へ大きく移動するということを思い出してください。 `dataset` の配列要素を調べると、`x` の値が増えているはずです。
|
||||
|
||||
D3 の `attr()` メソッドは、その属性を動的に設定するコールバック関数を受け入れます。 コールバック関数は 2 つの引数をとります。一つはデータポイント自体 (通常は `d`)、もう一つは配列内におけるデータポイントのインデックスです。 インデックスを示す 2 番目の引数はオプションです。 フォーマットは次のとおりです。
|
||||
|
||||
```js
|
||||
selection.attr("property", (d, i) => {
|
||||
|
||||
})
|
||||
```
|
||||
|
||||
重要な注意点として、`for` ループを記述したり、`forEach()` を使用してデータセット内のアイテムを繰り返したりする必要はありません。 既に学んだように、`data()` メソッドはデータセットを解析し、`data()` の後にチェーンされるあらゆるメソッドがデータセット内の各アイテムに対して一度実行されます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
インデックスの 30 倍が返るように、`x` 属性コールバック関数を変更してください。
|
||||
|
||||
**注:** 各バーの幅は 25 なので、`x` の値を 30 ずつ増やすとバーの間にスペースが追加されます。 この例では、25 より大きい値はいずれも有効です。
|
||||
|
||||
# --hints--
|
||||
|
||||
最初の `rect` は `x` 値を `0` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').eq(0).attr('x') == '0');
|
||||
```
|
||||
|
||||
2 番目の `rect` は `x` 値を `30` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').eq(1).attr('x') == '30');
|
||||
```
|
||||
|
||||
3 番目の `rect` は `x` 値を `60` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').eq(2).attr('x') == '60');
|
||||
```
|
||||
|
||||
4 番目の `rect` は `x` 値を `90` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').eq(3).attr('x') == '90');
|
||||
```
|
||||
|
||||
5 番目の `rect` は `x` 値を `120` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').eq(4).attr('x') == '120');
|
||||
```
|
||||
|
||||
6 番目の `rect` は `x` 値を `150` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').eq(5).attr('x') == '150');
|
||||
```
|
||||
|
||||
7 番目の `rect` は `x` 値を `180` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').eq(6).attr('x') == '180');
|
||||
```
|
||||
|
||||
8 番目の `rect` は `x` 値を `210` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').eq(7).attr('x') == '210');
|
||||
```
|
||||
|
||||
9 番目の `rect` は `x` 値を `240` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').eq(8).attr('x') == '240');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => {
|
||||
return i * 30
|
||||
})
|
||||
.attr("y", 0)
|
||||
.attr("width", 25)
|
||||
.attr("height", 100);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,143 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bd0
|
||||
title: SVG 要素を反転する
|
||||
challengeType: 6
|
||||
forumTopicId: 301488
|
||||
dashedName: invert-svg-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
棒グラフが上下逆になっている、つまり反転していることに気付いたことでしょう。 原因は、SVG による (x, y) 座標の使い方にあります。
|
||||
|
||||
SVG では、座標の原点は左上の隅にあります。 `x` 座標が 0 の場合、SVG 領域の左端に図形が配置されます。 `y` 座標が 0 の場合、SVG 領域の上端に図形が配置されます。 `x` の値が大きいほど、長方形は右側に押し出されます。 `y` の値が大きいほど、長方形は下側に押し出されます。
|
||||
|
||||
バーを正しい方向で表示するには、`y` 座標の計算方法を変更する必要があります。 これには、バーの高さと SVG 領域の総高との両方を考慮する必要があります。
|
||||
|
||||
SVG 領域の高さは 100 です。 セット内にデータポイント 0 があり、SVG 領域の (最上部ではなく) 最下部からバーを描くとします。 これを行うには、 `y` 座標の値を 100 にする必要があります。 データポイントの値が 1 であれば、`y` 座標 100 でスタートして最下部にバーを設定します。 次に、バーの高さ 1 を考慮する必要があるので、最終的な `y` 座標は 99 になります。
|
||||
|
||||
この `y` 座標 (`y = heightOfSVG - heightOfBar`) により、バーが正しい方向で配置されます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
バーが正しい方向で配置されるように、`y` 属性のコールバック関数を変更してください。 バーの `height` がデータ値 `d` の 3 倍であることに注意してください。
|
||||
|
||||
**注:** 一般に、`y = h - m * d` の関係があります (`m` はデータポイントを拡大縮小する定数)。
|
||||
|
||||
# --hints--
|
||||
|
||||
最初の `rect` は `y` 値を `64` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').eq(0).attr('y') == h - dataset[0] * 3);
|
||||
```
|
||||
|
||||
2 番目の `rect` は `y` 値を `7` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').eq(1).attr('y') == h - dataset[1] * 3);
|
||||
```
|
||||
|
||||
3 番目の `rect` は `y` 値を `34` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').eq(2).attr('y') == h - dataset[2] * 3);
|
||||
```
|
||||
|
||||
4 番目の `rect` は `y` 値を `49` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').eq(3).attr('y') == h - dataset[3] * 3);
|
||||
```
|
||||
|
||||
5 番目の `rect` は `y` 値を `25` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').eq(4).attr('y') == h - dataset[4] * 3);
|
||||
```
|
||||
|
||||
6 番目の `rect` は `y` 値を `46` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').eq(5).attr('y') == h - dataset[5] * 3);
|
||||
```
|
||||
|
||||
7 番目の `rect` は `y` 値を `13` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').eq(6).attr('y') == h - dataset[6] * 3);
|
||||
```
|
||||
|
||||
8 番目の `rect` は `y` 値を `58` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').eq(7).attr('y') == h - dataset[7] * 3);
|
||||
```
|
||||
|
||||
9 番目の `rect` は `y` 値を `73` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('rect').eq(8).attr('y') == h - dataset[8] * 3);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => 3 * d);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bcb
|
||||
title: D3 の SVG について学ぶ
|
||||
challengeType: 6
|
||||
forumTopicId: 301489
|
||||
dashedName: learn-about-svg-in-d3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
<dfn>SVG</dfn> とは <dfn>Scalable Vector Graphics</dfn> (スケーラブル・ベクター・グラフィックス) の略称です。
|
||||
|
||||
ここで言う「スケーラブル」とは、オブジェクトをズームインまたはズームアウトしてもピクセル化されないことを意味します。 携帯電話の小さな画面であれ、大型テレビの画面であれ、ディスプレイシステムに合わせて画像が調整されます。
|
||||
|
||||
SVG は、一般的な幾何学的図形を作成するために使用されます。 データを視覚的な表現にマッピングする D3 は、SVG を使用して視覚化用の図形を作成します。 ウェブページの用 SVG 図形は、HTML の `svg` タグ内に位置する必要があります。
|
||||
|
||||
(`vh`、 `vw`、パーセンテージなどの) 相対単位をスタイルに使用すれば、 CSS でもスケーラブルに表現できます。しかし SVG を使用すれば、より柔軟にデータを可視化できます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`append()` を使用して `body` に `svg` ノードを追加してください。 そのノードに対し、与えられた `w` 定数に設定された `width` 属性と、与えられた `h` 定数に設定された `height` 属性を設定してください。それぞれ、`attr()` メソッドまたは `style()` メソッドを使用して行ってください。 これは出力結果を見れば確認できます。`style` タグ内で、ピンクの `background-color` が適用されているからです。
|
||||
|
||||
**注: ** `attr()` を使用する場合、幅と高さの属性には単位がありません。 これはスケーリングの基礎であり、ズームレベルに関係なく要素の幅と高さの比率は常に 5:1 です。
|
||||
|
||||
# --hints--
|
||||
|
||||
ドキュメントには 1 個の `svg` 要素が必要です。
|
||||
|
||||
```js
|
||||
assert($('svg').length == 1);
|
||||
```
|
||||
|
||||
`svg` 要素は、`width` 属性を `500` に設定するか、幅が `500px` になるようにスタイルを調整する必要があります。
|
||||
|
||||
```js
|
||||
assert($('svg').attr('width') == '500' || $('svg').css('width') == '500px');
|
||||
```
|
||||
|
||||
`svg` 要素は、`height` 属性を `100` に設定するか、幅が `100px` になるようにスタイルを調整する必要があります。
|
||||
|
||||
```js
|
||||
assert($('svg').attr('height') == '100' || $('svg').css('height') == '100px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
svg {
|
||||
background-color: pink;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bc3
|
||||
title: D3 で要素のグループを選択する
|
||||
challengeType: 6
|
||||
forumTopicId: 301490
|
||||
dashedName: select-a-group-of-elements-with-d3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
D3 には、要素のグループを選択するための `selectAll()` メソッドもあります。 このメソッドは、入力文字列に一致する、ドキュメント内のすべてのアイテムについて HTML ノードの配列を返します。 ドキュメント内のすべてのアンカータグを選択するには、例えば次のように記述します。
|
||||
|
||||
```js
|
||||
const anchors = d3.selectAll("a");
|
||||
```
|
||||
|
||||
`select()` メソッドと同様に、 `selectAll()` はメソッドチェーンをサポートしており、他のメソッドと併用できます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
ドキュメント内のすべての `li` タグを選択し、次に、`.text()` メソッドをチェーンすることによりテキストを文字列 `list item` に変更してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
ページ上に `li` 要素が 3 個あり、それぞれのテキストが `list item` になっている必要があります。 大文字とスペースの使い方が厳密に一致する必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('li')
|
||||
.text()
|
||||
.match(/list item/g).length == 3
|
||||
);
|
||||
```
|
||||
|
||||
`d3` オブジェクトにアクセスする必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/d3/g));
|
||||
```
|
||||
|
||||
`selectAll` メソッドを使用する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.selectAll/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<ul>
|
||||
<li>Example</li>
|
||||
<li>Example</li>
|
||||
<li>Example</li>
|
||||
</ul>
|
||||
<script>
|
||||
d3.selectAll("li")
|
||||
.text("list item")
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,106 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bdb
|
||||
title: ドメインとレンジをスケールに設定する
|
||||
challengeType: 6
|
||||
forumTopicId: 301491
|
||||
dashedName: set-a-domain-and-a-range-on-a-scale
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
デフォルトでは、スケールは同一関係を使用します。 これは、入力値が出力値にマッピングされることを意味します。 しかし、スケールはそれよりはるかに柔軟で面白いことができます。
|
||||
|
||||
データセットの値の範囲を 50 ～ 480 とします。 これはスケールの入力情報であり、<dfn>ドメイン</dfn> とも呼ばれます。
|
||||
|
||||
これらの点を SVG キャンバス上の `x` 軸に沿って、10 単位から 500 単位の間でマッピングするとします。 これは出力情報であり、<dfn>レンジ</dfn> とも呼ばれます。
|
||||
|
||||
`domain()` メソッドと `range()` メソッドは、これらの値をスケールに設定します。 両方のメソッドは少なくとも 2 つの要素の配列を引数として取ります。 以下がその例です。
|
||||
|
||||
```js
|
||||
scale.domain([50, 480]);
|
||||
scale.range([10, 500]);
|
||||
scale(50)
|
||||
scale(480)
|
||||
scale(325)
|
||||
scale(750)
|
||||
d3.scaleLinear()
|
||||
```
|
||||
|
||||
値 `10`、`500`、 `323.37`、および `807.67` がこの順序でコンソールに表示されます。
|
||||
|
||||
注意点として、スケールは、ドメイン値とレンジ値の間に線形関係があるという前提で、与えられた数値に対する出力内容を決定します。 ドメイン (50) の最小値は、レンジの最小値 (10) にマッピングされます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
スケールを作成し、そのドメインを `[250, 500]`、レンジを `[10, 150]` に設定してください。
|
||||
|
||||
**注:** `domain()` メソッドと `range()` メソッドを `scale` 変数にチェーンすることができます。
|
||||
|
||||
# --hints--
|
||||
|
||||
`domain()` メソッドを使用する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.domain/g));
|
||||
```
|
||||
|
||||
`scale` の `domain()` は `[250, 500]` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(JSON.stringify(scale.domain()) == JSON.stringify([250, 500]));
|
||||
```
|
||||
|
||||
`range()` メソッドを使用する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.range/g));
|
||||
```
|
||||
|
||||
`scale` の `range()` は `[10, 150]` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(JSON.stringify(scale.range()) == JSON.stringify([10, 150]));
|
||||
```
|
||||
|
||||
`h2` 内のテキストを `-102` にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('h2').text() == '-102');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const scale = d3.scaleLinear();
|
||||
scale.domain([250, 500])
|
||||
scale.range([10, 150])
|
||||
const output = scale(50);
|
||||
d3.select("body")
|
||||
.append("h2")
|
||||
.text(output);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,110 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd3
|
||||
title: D3 ラベルのスタイルを作成する
|
||||
challengeType: 6
|
||||
forumTopicId: 301492
|
||||
dashedName: style-d3-labels
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
D3 メソッドは、バーのラベルにスタイルを追加することができます。 `fill` 属性は、 `text` ノードのテキストの色を設定します。 `style()` メソッドは、 `font-family` や `font-size` のような他のスタイルの CSS ルールを設定します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`text` 要素の `font-size` を `25px` に設定し、テキストの色を赤にしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
すべてのラベルの `fill` を赤色にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('text').css('fill') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
すべてのラベルの `font-size` を `25` ピクセル にする必要があります。
|
||||
|
||||
```js
|
||||
assert($('text').css('font-size') == '25px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => d * 3)
|
||||
.attr("fill", "navy");
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.text((d) => d)
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - (3 * d) - 3)
|
||||
.style("font-size", 25)
|
||||
.attr("fill", "red")
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,137 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bc9
|
||||
title: 要素の高さを動的に更新する
|
||||
challengeType: 6
|
||||
forumTopicId: 301493
|
||||
dashedName: update-the-height-of-an-element-dynamically
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
これまでのチャレンジでは、配列からのデータを表示する方法と、CSS クラスを追加する方法を学びました。 それらで学んだことを組み合わせて、単純な棒グラフを作成できます。 それは次の 2 段階で行います。
|
||||
|
||||
1) 配列内の各データポイントに対して `div` を作成する
|
||||
|
||||
2) `style()` メソッド内で、高さをデータ値と等しくするコールバック関数を使用して、各 `div` に動的な高さを設定する
|
||||
|
||||
コールバック関数でスタイルを設定するための、次のフォーマットを思い出してください。
|
||||
|
||||
```js
|
||||
selection.style("cssProperty", (d) => d)
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
`style()` メソッドをエディタ内のコードに追加して、各要素の `height` プロパティを設定してください。 コールバック関数を使用して、データポイントの値に文字列 `px` を加えた値を返してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
最初の `div` は `height` を `12` ピクセルにする必要があります。
|
||||
|
||||
```js
|
||||
assert($('div').eq(0)[0].style.height === '12px');
|
||||
```
|
||||
|
||||
2 番目の `div` は `height` を `31` ピクセルにする必要があります。
|
||||
|
||||
```js
|
||||
assert($('div').eq(1)[0].style.height === '31px');
|
||||
```
|
||||
|
||||
3 番目の `div` は `height` を `22` ピクセルにする必要があります。
|
||||
|
||||
```js
|
||||
assert($('div').eq(2)[0].style.height === '22px');
|
||||
```
|
||||
|
||||
4 番目の `div` は `height` を `17` ピクセルにする必要があります。
|
||||
|
||||
```js
|
||||
assert($('div').eq(3)[0].style.height === '17px');
|
||||
```
|
||||
|
||||
5 番目の `div` は `height` を `25` ピクセルにする必要があります。
|
||||
|
||||
```js
|
||||
assert($('div').eq(4)[0].style.height === '25px');
|
||||
```
|
||||
|
||||
6 番目の `div` は `height` を `18` ピクセルにする必要があります。
|
||||
|
||||
```js
|
||||
assert($('div').eq(5)[0].style.height === '18px');
|
||||
```
|
||||
|
||||
7 番目の `div` は `height` を `29` ピクセルにする必要があります。
|
||||
|
||||
```js
|
||||
assert($('div').eq(6)[0].style.height === '29px');
|
||||
```
|
||||
|
||||
8 番目の `div` は `height` を `14` ピクセルにする必要があります。
|
||||
|
||||
```js
|
||||
assert($('div').eq(7)[0].style.height === '14px');
|
||||
```
|
||||
|
||||
9 番目の `div` は `height` を `9` ピクセルにする必要があります。
|
||||
|
||||
```js
|
||||
assert($('div').eq(8)[0].style.height === '9px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar {
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("div")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("div")
|
||||
.attr("class", "bar")
|
||||
.style('height', d => `${d}px`)
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,347 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bde
|
||||
title: 事前定義スケールを使用して要素を配置する
|
||||
challengeType: 6
|
||||
forumTopicId: 301494
|
||||
dashedName: use-a-pre-defined-scale-to-place-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
スケールの設定ができたので、散布図を再びマッピングしましょう。 スケールとは、`x` と `y` の生データを、SVG キャンバス上に正しく収めて表示するための値に変換する処理関数のようなものです。 スケールにより、データが常に画面のプロット領域内に収められます。
|
||||
|
||||
スケーリング関数を使用して、SVG 図形の座標属性値を設定します。 これには `rect` 要素か `text` 要素の `x` 属性と `y` 属性、または、`circles` 要素の `cx` 属性と `cy` 属性が含まれます。 次に例を示します。
|
||||
|
||||
```js
|
||||
shape
|
||||
.attr("x", (d) => xScale(d[0]))
|
||||
```
|
||||
|
||||
スケールで図形座標属性を設定して、データポイントを SVG キャンバス上に配置します。 ツールチップやラベルの `text()` メソッド内などで、実際のデータ値を表示するときにスケールを適用する必要はありません。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`xScale` と `yScale` を使用して、`circle` 図形と `text` 図形の両方を SVG キャンバスに配置してください。 `circles` については、スケールを適用して `cx` 属性と `cy` 属性を設定します。 また、これらに `5` 単位の半径を指定します。
|
||||
|
||||
`text` 要素については、スケールを適用して `x` 属性と `y` 属性を設定します。 ラベルはドットの右側にオフセットされている必要があります。 これを行うには、`x` のデータ値に `10` 単位を追加してからデータ値を `xScale` に渡します。
|
||||
|
||||
# --hints--
|
||||
|
||||
10 個の `circle` 要素が必要です。
|
||||
|
||||
```js
|
||||
assert($('circle').length == 10);
|
||||
```
|
||||
|
||||
最初の `circle` 要素は、スケールを適用した後の `cx` 値がおよそ `91`、`cy` 値がおよそ `368` である必要があります。 `r` 値は `5` である必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('circle').eq(0).attr('cx')) == '91' &&
|
||||
Math.round($('circle').eq(0).attr('cy')) == '368' &&
|
||||
$('circle').eq(0).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
2 番目の `circle` 要素は、スケールを適用した後の `cx` 値がおよそ `159` 、 `cy` 値がおよそ `181` である必要があります。 `r` 値は `5` である必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('circle').eq(1).attr('cx')) == '159' &&
|
||||
Math.round($('circle').eq(1).attr('cy')) == '181' &&
|
||||
$('circle').eq(1).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
3 番目の `circle` 要素は、スケールを適用した後の `cx` 値がおよそ `340`、 `cy` 値がおよそ `329` である必要があります。 `r` 値は `5` である必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('circle').eq(2).attr('cx')) == '340' &&
|
||||
Math.round($('circle').eq(2).attr('cy')) == '329' &&
|
||||
$('circle').eq(2).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
4 番目の `circle` 要素は、スケールを適用した後の `cx` 値がおよそ `131`、 `cy` 値がおよそ `60` である必要があります。 `r` 値は `5` である必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('circle').eq(3).attr('cx')) == '131' &&
|
||||
Math.round($('circle').eq(3).attr('cy')) == '60' &&
|
||||
$('circle').eq(3).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
5 番目の `circle` 要素は、スケールを適用した後の `cx` 値がおよそ `440`、 `cy` 値がおよそ `237` である必要があります。 `r` 値は `5` である必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('circle').eq(4).attr('cx')) == '440' &&
|
||||
Math.round($('circle').eq(4).attr('cy')) == '237' &&
|
||||
$('circle').eq(4).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
6 番目の `circle` 要素は、スケールを適用した後の `cx` 値がおよそ `271`、 `cy` 値がおよそ `306` である必要があります。 `r` 値は `5` である必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('circle').eq(5).attr('cx')) == '271' &&
|
||||
Math.round($('circle').eq(5).attr('cy')) == '306' &&
|
||||
$('circle').eq(5).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
7 番目の `circle` 要素は、スケールを適用した後の `cx` 値がおよそ `361`、 `cy` 値がおよそ `351` である必要があります。 `r` 値は `5` である必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('circle').eq(6).attr('cx')) == '361' &&
|
||||
Math.round($('circle').eq(6).attr('cy')) == '351' &&
|
||||
$('circle').eq(6).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
8 番目の `circle` 要素は、スケールを適用した後の `cx` 値がおよそ `261`、 `cy` 値がおよそ `132` である必要があります。 `r` 値は `5` である必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('circle').eq(7).attr('cx')) == '261' &&
|
||||
Math.round($('circle').eq(7).attr('cy')) == '132' &&
|
||||
$('circle').eq(7).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
9 番目の `circle` 要素は、スケールを適用した後の `cx` 値がおよそ `131`、 `cy` 値がおよそ `144` である必要があります。 `r` 値は `5` である必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('circle').eq(8).attr('cx')) == '131' &&
|
||||
Math.round($('circle').eq(8).attr('cy')) == '144' &&
|
||||
$('circle').eq(8).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
10 番目の `circle` 要素は、スケールを適用した後の `cx` 値がおよそ `79` 、 `cy` 値がおよそ `326` である必要があります。 `r` 値は `5` である必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('circle').eq(9).attr('cx')) == '79' &&
|
||||
Math.round($('circle').eq(9).attr('cy')) == '326' &&
|
||||
$('circle').eq(9).attr('r') == '5'
|
||||
);
|
||||
```
|
||||
|
||||
10 個の `text` 要素が必要です。
|
||||
|
||||
```js
|
||||
assert($('text').length == 10);
|
||||
```
|
||||
|
||||
最初のラベルは、スケールを適用した後の `x` 値がおよそ `100`、`y` 値がおよそ `368` である必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('text').eq(0).attr('x')) == '100' &&
|
||||
Math.round($('text').eq(0).attr('y')) == '368'
|
||||
);
|
||||
```
|
||||
|
||||
2 番目のラベルは、スケールを適用した後の `x` 値がおよそ `168`、`y` 値がおよそ `181` である必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('text').eq(1).attr('x')) == '168' &&
|
||||
Math.round($('text').eq(1).attr('y')) == '181'
|
||||
);
|
||||
```
|
||||
|
||||
3 番目のラベルは、スケールを適用した後の `x` 値がおよそ `350`、`y` 値がおよそ `329` である必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('text').eq(2).attr('x')) == '350' &&
|
||||
Math.round($('text').eq(2).attr('y')) == '329'
|
||||
);
|
||||
```
|
||||
|
||||
4 番目のラベルは、スケールを適用した後の `x` 値がおよそ `141`、`y` 値がおよそ `60` である必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('text').eq(3).attr('x')) == '141' &&
|
||||
Math.round($('text').eq(3).attr('y')) == '60'
|
||||
);
|
||||
```
|
||||
|
||||
5 番目のラベルは、スケールを適用した後の `x` 値がおよそ `449`、`y` 値がおよそ `237` である必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('text').eq(4).attr('x')) == '449' &&
|
||||
Math.round($('text').eq(4).attr('y')) == '237'
|
||||
);
|
||||
```
|
||||
|
||||
6 番目のラベルは、スケールを適用した後の `x` 値がおよそ `280`、`y` 値がおよそ `306` である必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('text').eq(5).attr('x')) == '280' &&
|
||||
Math.round($('text').eq(5).attr('y')) == '306'
|
||||
);
|
||||
```
|
||||
|
||||
7 番目のラベルは、スケールを適用した後の `x` 値がおよそ `370`、`y` 値がおよそ `351` である必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('text').eq(6).attr('x')) == '370' &&
|
||||
Math.round($('text').eq(6).attr('y')) == '351'
|
||||
);
|
||||
```
|
||||
|
||||
8 番目のラベルは、スケールを適用した後の `x` 値がおよそ `270`、`y` 値がおよそ `132` である必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('text').eq(7).attr('x')) == '270' &&
|
||||
Math.round($('text').eq(7).attr('y')) == '132'
|
||||
);
|
||||
```
|
||||
|
||||
9 番目のラベルは、スケールを適用した後の `x` 値がおよそ `140`、`y` 値がおよそ `144` である必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('text').eq(8).attr('x')) == '140' &&
|
||||
Math.round($('text').eq(8).attr('y')) == '144'
|
||||
);
|
||||
```
|
||||
|
||||
10 番目のラベルは、スケールを適用した後の `x` 値がおよそ `88`、`y` 値がおよそ `326` である必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round($('text').eq(9).attr('x')) == '88' &&
|
||||
Math.round($('text').eq(9).attr('y')) == '326'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
const padding = 60;
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[0])])
|
||||
.range([padding, w - padding]);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[1])])
|
||||
.range([h - padding, padding]);
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("circle")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("circle")
|
||||
.attr("cx", (d) => xScale(d[0]))
|
||||
.attr("cy", (d) => yScale(d[1]))
|
||||
.attr("r", 5)
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.text((d) => (d[0] + ", "
|
||||
+ d[1]))
|
||||
.attr("x", (d) => xScale(d[0] + 10))
|
||||
.attr("y", (d) => yScale(d[1]))
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,156 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bdd
|
||||
title: 動的スケールを使用する
|
||||
challengeType: 6
|
||||
forumTopicId: 301495
|
||||
dashedName: use-dynamic-scales
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
D3 の `min()` メソッドと `max()` メソッドは、スケールを設定する際に便利です。
|
||||
|
||||
複雑なデータセットが与えられた場合、優先事項の一つは、可視化されたものが SVG コンテナの幅と高さに合うようにスケールを設定することです。 すべてのデータがウェブページに表示されるように、SVG キャンバス内にデータをプロットしましょう。
|
||||
|
||||
下の例は、散布図データの x 軸スケールを設定します。 `domain()` メソッドは、プロットされる生データ値に関する情報をスケールに渡します。 `range()` メソッドは、ウェブページ上で可視化に使用される実際のスペースに関する情報をスケールに提供します。
|
||||
|
||||
この例では、ドメインはセット内の 0 から最大値までです。 配列内の x 値に基づいて、コールバック関数で `max()` メソッドを使用します。 レンジには SVG キャンバスの幅 (`w`) を使用しますが、いくらかのパディングも含めます。 これにより、散布図のドットと SVG キャンバスの端との間に余白が作られます。
|
||||
|
||||
```js
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
|
||||
const padding = 30;
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[0])])
|
||||
.range([padding, w - padding]);
|
||||
```
|
||||
|
||||
最初はパディングというものが分かりづらいかもしれません。 X 軸を、0 ～ 500 (SVG キャンバスの幅の値) の値を持つ横線と考えてください。 `range()` メソッドにパディングを含めると、プロットはその線に沿って (0 ではなく) 30 から開始し、(500 ではなく) 470 で終了します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`yScale` 変数を使用して、線形の y 軸スケールを作成してください。 ドメインの開始点を 0 に、終了点をセット内の `y` の最大値にする必要があります。 レンジには SVG の高さ (`h`) を使用し、パディングを含める必要があります。
|
||||
|
||||
**注:** プロットを正しい方向に保つことを忘れないでください。 Y 座標のレンジを指定する際は、(高さからパディングを引いた) 大きい方の値が第 1 引数、小さい方の値が第 2 引数になります。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h2` 内のテキストを `30` にする必要があります。
|
||||
|
||||
```js
|
||||
assert(output == 30 && $('h2').text() == '30');
|
||||
```
|
||||
|
||||
yScale の `domain()` は `[0, 411]` と等しくする必要があります。
|
||||
|
||||
```js
|
||||
assert(JSON.stringify(yScale.domain()) == JSON.stringify([0, 411]));
|
||||
```
|
||||
|
||||
yScale の `range()` は `[470, 30]` と等しくする必要があります。
|
||||
|
||||
```js
|
||||
assert(JSON.stringify(yScale.range()) == JSON.stringify([470, 30]));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
|
||||
|
||||
const padding = 30;
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[0])])
|
||||
.range([padding, w - padding]);
|
||||
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[1])])
|
||||
.range([h - padding, padding]);
|
||||
|
||||
|
||||
const output = yScale(411);
|
||||
d3.select("body")
|
||||
.append("h2")
|
||||
.text(output)
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bdc
|
||||
title: >-
|
||||
d3.max 関数および d3.min 関数を使用してデータセット内の最小値と最大値を見つける
|
||||
challengeType: 6
|
||||
forumTopicId: 301496
|
||||
dashedName: >-
|
||||
use-the-d3-max-and-d3-min-functions-to-find-minimum-and-maximum-values-in-a-dataset
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
D3 のメソッド `domain()` と `range()` は、データを基にそれぞれスケールのドメイン情報とレンジ情報を設定します。 同じことをより簡単に行う方法がいくつかあります。
|
||||
|
||||
ドメインを設定する場合に、データセット内の最小値と最大値を使いたいことがよくあります。 手作業でこれらの値を見つけようとすると、特にデータセットが大きい場合はミスが起こりがちです。
|
||||
|
||||
D3 には、この情報を返すための 2 つのメソッド、`min()` と `max()` があります。 次に例を示します。
|
||||
|
||||
```js
|
||||
const exampleData = [34, 234, 73, 90, 6, 52];
|
||||
d3.min(exampleData)
|
||||
d3.max(exampleData)
|
||||
```
|
||||
|
||||
データセットの中で配列がネストされている場合があります。散布図の例にあった `[x, y]` 座標ペアはその一例です。 その場合、最大値と最小値の計算方法を D3 に指示する必要があります。 幸いなことに、`min()` と `max()` の両メソッドはコールバック関数を取ります。 この例では、コールバック関数の引数 `d` は現在のネストされた配列に対するものです。 このコールバック関数は、最大値または最小値の計算対象となる、ネストされた配列 (`x` または `y` の値) から要素を返す必要があります。 複数の配列中の 1 つの配列における最大値と最小値を見つけるには、例えば次の方法を使用します。
|
||||
|
||||
```js
|
||||
const locationData = [[1, 7],[6, 3],[8, 3]];
|
||||
const minX = d3.min(locationData, (d) => d[0]);
|
||||
```
|
||||
|
||||
`minX` の値は `1` です。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`positionData` 配列に x、y、z 座標の部分配列が含まれています。 D3 メソッドを使用してこの配列から z 座標の最大値 (3 番目の値) を求め、`output` 変数に保存してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h2` 内のテキストを `8` にする必要があります。
|
||||
|
||||
```js
|
||||
assert(output == 8 && $('h2').text() == '8');
|
||||
```
|
||||
|
||||
`max()` メソッドを使用する必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\.max/g),
|
||||
'Your code should use the <code>max()</code> method.'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const positionData = [[1, 7, -4],[6, 3, 8],[2, 9, 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const positionData = [[1, 7, -4],[6, 3, 8],[2, 9, 3]]
|
||||
|
||||
const output = d3.max(positionData, (d) => d[2])
|
||||
|
||||
d3.select("body")
|
||||
.append("h2")
|
||||
.text(output)
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc4
|
||||
title: D3 でデータを操作する
|
||||
challengeType: 6
|
||||
forumTopicId: 301497
|
||||
dashedName: work-with-data-in-d3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
D3 ライブラリはデータ駆動型アプローチに焦点を当てています。 データセットがあるとき、D3 のメソッドを適用してデータをページ上に表示することができます。 データには多くのフォーマットがありますが、このチャレンジでは単純な数字の配列を使用します。
|
||||
|
||||
最初のステップでは、D3 にデータを認識させます。 選択された DOM 要素に対して、`data()` メソッドを使用してそれらの要素にデータをアタッチします。 データセットは引数としてメソッドに渡されます。
|
||||
|
||||
一般的なワークフローパターンでは、セット内の各データに対してドキュメント内に新しい要素を作成します。 D3 には、この目的のための `enter()` メソッドがあります。
|
||||
|
||||
`enter()` メソッドは、`data()` と共に使用された場合、ページから選択された要素を調べ、セット内のデータアイテムの数と比較します。 要素の数がデータアイテムよりも少ない場合、不足している要素が作成されます。
|
||||
|
||||
次の例は、 `ul` 要素を選択し、配列内のエントリ数に基づいて新しいリストアイテムを作成します。
|
||||
|
||||
```html
|
||||
<body>
|
||||
<ul></ul>
|
||||
<script>
|
||||
const dataset = ["a", "b", "c"];
|
||||
d3.select("ul").selectAll("li")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("li")
|
||||
.text("New item");
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
まだ存在しない要素を選択するというのは、分かりづらいかもしれません。 このコードは D3 に対し、最初にページ上の `ul` を選択するよう 指示しています。 次に、すべてのリストアイテムを選択します。これにより、空の選択範囲が返ります。 次に、`data()` メソッドはデータセットを調べ、配列内の各アイテムに対して 1 回ずつ、計 3 回、後続のコードを実行します。 `enter()` メソッドからはページ上に `li` 要素が見えませんが、このメソッドには 3 つ (`dataset` 内の各データに 1 つ) の要素が必要です。 新しい `li` 要素が `ul` に追加され、それは `New item` というテキストを持ちます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`body` ノードを選択した後、すべての `h2` 要素を選択してください。 `dataset` 配列内の各アイテムに対して `h2` タグを作成し追加するよう、D3 に指示してください。 `h2` 内のテキストを `New Title` にする必要があります。 `data()` メソッドと `enter()` メソッドを使用する必要があります。
|
||||
|
||||
# --hints--
|
||||
|
||||
ドキュメントには 9 個の `h2` 要素が必要です。
|
||||
|
||||
```js
|
||||
assert($('h2').length == 9);
|
||||
```
|
||||
|
||||
`h2` 要素内のテキストを `New Title` にする必要があります。 大文字とスペースの使い方が厳密に一致する必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h2')
|
||||
.text()
|
||||
.match(/New Title/g).length == 9
|
||||
);
|
||||
```
|
||||
|
||||
`data()` メソッドを使用する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.data/g));
|
||||
```
|
||||
|
||||
`enter()` メソッドを使用する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.enter/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body")
|
||||
.selectAll("h2")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("h2")
|
||||
.text("New Title")
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,122 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc5
|
||||
title: D3 で動的データを操作する
|
||||
challengeType: 6
|
||||
forumTopicId: 301498
|
||||
dashedName: work-with-dynamic-data-in-d3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
最後の 2 つのチャレンジでは、`data()` と `enter()` の各メソッドを使用して D3 で動的にデータを表示するための基本を学びます。 これらのメソッドは `append()` メソッドと共にデータセットを取り、データセット内の各エントリに対して新しい DOM 要素を作成します。
|
||||
|
||||
以前のチャレンジでは、`dataset` 配列内の各アイテムに対して新しい `h2` 要素を作成しました。しかし、それらはすべて `New Title` という同じテキストを含んでいました。 その原因は、`h2` 要素のそれぞれにバインドされているデータを使用していないことです。
|
||||
|
||||
D3 の `text()` メソッドは、引数として文字列またはコールバック関数を取ることができます。
|
||||
|
||||
```js
|
||||
selection.text((d) => d)
|
||||
```
|
||||
|
||||
上の例では、パラメータ `d` は、選択範囲のバインド先であるデータセット内の単一のエントリを参照します。
|
||||
|
||||
現在の例をコンテキストとして使用すると、最初の `h2` 要素は 12 に、2 番目の `h2` 要素は 31 に、3 番目の `h2` 要素は 22 にバインドされ、以降も同様です。
|
||||
|
||||
# --instructions--
|
||||
|
||||
それぞれの `h2` 要素に対応する値が `dataset` 配列から取得され、単一のスペースおよび文字列 `USD` と共に表示されるように、`text()` メソッドを変更してください。 例えば、最初の見出しを `12 USD` にする必要があります。
|
||||
|
||||
# --hints--
|
||||
|
||||
最初の `h2` にはテキスト `12 USD` が必要です。
|
||||
|
||||
```js
|
||||
assert($('h2').eq(0).text() == '12 USD');
|
||||
```
|
||||
|
||||
2 番目の `h2` にはテキスト `31 USD` が必要です。
|
||||
|
||||
```js
|
||||
assert($('h2').eq(1).text() == '31 USD');
|
||||
```
|
||||
|
||||
3 番目の `h2` にはテキスト `22 USD` が必要です。
|
||||
|
||||
```js
|
||||
assert($('h2').eq(2).text() == '22 USD');
|
||||
```
|
||||
|
||||
4 番目の `h2` にはテキスト `17 USD` が必要です。
|
||||
|
||||
```js
|
||||
assert($('h2').eq(3).text() == '17 USD');
|
||||
```
|
||||
|
||||
5 番目の `h2` にはテキスト `25 USD` が必要です。
|
||||
|
||||
```js
|
||||
assert($('h2').eq(4).text() == '25 USD');
|
||||
```
|
||||
|
||||
6 番目の `h2`にはテキスト `18 USD` が必要です。
|
||||
|
||||
```js
|
||||
assert($('h2').eq(5).text() == '18 USD');
|
||||
```
|
||||
|
||||
7 番目の `h2` にはテキスト `29 USD` が必要です。
|
||||
|
||||
```js
|
||||
assert($('h2').eq(6).text() == '29 USD');
|
||||
```
|
||||
|
||||
8 番目の `h2` にはテキスト `14 USD` が必要です。
|
||||
|
||||
```js
|
||||
assert($('h2').eq(7).text() == '14 USD');
|
||||
```
|
||||
|
||||
9 番目の `h2` にはテキスト `9 USD` が必要です。
|
||||
|
||||
```js
|
||||
assert($('h2').eq(8).text() == '9 USD');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("h2")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("h2")
|
||||
.text((d) => `${d} USD`);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
Reference in New Issue
Block a user