From 57c638994f17b5fae421b6b1dfaeace1099facef Mon Sep 17 00:00:00 2001 From: Sabeer Sulaiman Date: Fri, 24 May 2019 22:38:51 +0530 Subject: [PATCH] Guide Article guide/english/d3 typo and version fixes + D3 DOM Selectors article (#30193) * D3 Version and Typo Fixes * D3 Guide: DOM Selectors in D3 + rearrangement * Reverse the rename * Intendation changed to 2 spaces --- guide/english/d3/2-dom-selectors-d3/index.md | 119 +++++++++++++++++++ guide/english/d3/index.md | 1 - 2 files changed, 119 insertions(+), 1 deletion(-) create mode 100644 guide/english/d3/2-dom-selectors-d3/index.md diff --git a/guide/english/d3/2-dom-selectors-d3/index.md b/guide/english/d3/2-dom-selectors-d3/index.md new file mode 100644 index 0000000000..535cf782df --- /dev/null +++ b/guide/english/d3/2-dom-selectors-d3/index.md @@ -0,0 +1,119 @@ +--- +title: Dom Selectors in D3 +--- + +## Introduction + +You can use D3 to select DOM elements inorder to perform some actions on them, like changing its attributes or perform data joins, for example: + +```html + + + + + D3 + + + + +

Welcome To D3

+ + + +``` + +Notice that the color of the h1 tag changing to `red`. There are two D3 functions for selecting DOM elements, `d3.select` and `d3.selectAll`. Both functions takes css selectors as its argument. + +## d3.select + +As the difference in names suggests, `d3.select` can be used to select the first element that matches the css selector provided as argument. `d3.select('#id')`, `d3.select('.classes')`, `d3.select('d3.select')` are all valid examples. The selected element can then be used to change its properties. These can be chained endlessly inorder to perform multiple modifications. For example: + +```html + + + + + D3 + + + + + +

Welcome To D3

+ + + +``` + +## d3.selectAll + +This function can be used to select all occurences matched by a CSS selector provided as an argument. We can the use functions like `each` to perform actions on all of them. `d3.selectAll` is more powerful when used with data joins, which we will cover in a later chapter. + +```html + + + + + D3 + + + + + +
+
+
+
+
+ + + +``` + +Notice how we provided a function as the argument for `each` and it also takes two arguments. The first argument `d` is associated with one of the powerful aspects of **D3** namely data joins. If you had used data joins you'll be able to get that data as `d`. Next argument is `i` is the `0` based index of the selected items, we are using this argument to change the width of the divisions based on their occurence in the selection. For a detailed overview of functions like `append` and `html` refer the [official documentation](https://github.com/d3/d3-selection/blob/master/README.md#modifying-elements). + +## Chaining + +You can also use the select in a chained fashion. Inorder to select + +## References + +- https://github.com/d3/d3-selection/blob/master/README.md +- https://github.com/d3/d3-selection/blob/master/README.md#modifying-elements diff --git a/guide/english/d3/index.md b/guide/english/d3/index.md index 636f7548ad..14fb7abca9 100644 --- a/guide/english/d3/index.md +++ b/guide/english/d3/index.md @@ -12,7 +12,6 @@ title: D3 **D3.js** version 1.0.0 was released back in 18 February 2011. ## Why D3.js? - For those already familiar with HTML and CSS, *D3* is quick to learn. Unlike **Processing**, **Raphaël**, or **Protovis**, *D3's* vocabulary of graphical marks comes directly from web standards: HTML, SVG, and CSS - https://d3js.org/ ## Get Started