Global - Documentation

Methods

addClass(className) → {selection}

jQuery equivalent: $.addClass

Adds class to elements in the current selection. Returns current selection.

Parameters:

Name	Type	Description
`className`	string	The class to insert

Source:

addClass.js, line 1

Example

d3.selectAll('ul').addClass('active');
d3.selectAll('ul').addClass('class-a class-b'); //will add two classes

after(tagName) → {selection}

jQuery equivalent: $.after

Inserts new elements after each element in the current selection. Returns the newly created elements as a d3 selection.

Parameters:

Name	Type	Description
`tagName`	string	The element to insert

Source:

after.js, line 3

Example

d3.selectAll('li')
  .after('li')
  .text('Item');
  //do something else with the inserted elements...

appendTo(tagName) → {selection}

jQuery equivalent: $.appendTo

Appends elements of the current selection to the target element. Returns the target selection.

Parameters:

Name	Type	Description
`tagName`	string	The element to append

Source:

appendTo.js, line 3

Example

d3.selectAll('.foo').appendTo('.target');

before(tagName) → {selection}

jQuery equivalent: $.before

Inserts new elements before each element in the current selection. Returns the newly created elements as a d3 selection.

Parameters:

Name	Type	Description
`tagName`	string	The element to insert

Source:

before.js, line 3

Example

d3.selectAll('li')
  .before('li')
  .text('Item');
  //do something else with the inserted elements...

clear() → {selection}

jQuery equivalent: $.empty

Removes all children of the current selection. Returns the current selection. We are using another name for this function as in jQuery, because d3 already has an empty function.

Source:

clear.js, line 1

Example

d3.selectAll('ul')
  .clear();
  // ul element has no children anymore.

css() → {selection}

jQuery equivalent: $.css

Applies style to elements in the current selection. Returns the selection. Works in the same way like the D3 style function we only changed the name here.

Source:

css.js, line 1

Example

selection.css(name, value);
selection.css(object);

eq(index, groupIndexopt) → {element}

jQuery equivalent: $.eq

Reduces current selection to the element with the passed index. Returns element. If you have a nested group, you can also specify the group index, to select a certain group.

Parameters:

Name	Type	Attributes	Description
`index`	string		The index to select
`groupIndex`	string	<optional>	Group to select

Source:

eq.js, line 3

Example

d3.selectAll('li').eq('0');
// returns first li element

first() → {selection}

jQuery equivalent: $.first

Reduces the current selection to the first element. Then returns the reduced selection.

Source:

first.js, line 3

Example

d3.selectAll('ul').first();

hasClass(className) → {bool}

jQuery equivalent: $.hasClass

Checks if current selection has the passed class. Returns true or false.

Parameters:

Name	Type	Description
`className`	string	The element to append

Source:

hasClass.js, line 1

Example

d3.selectAll('ul').hasClass('active');

hide() → {selection}

jQuery equivalent: $.hide

Hides the current selection. Returns the selection.

Source:

hide.js, line 1

Example

d3.selectAll('.foo').hide();

last() → {selection}

jQuery equivalent: $.last

Reduces the current selection to the last element. Then returns the reduced selection.

Source:

last.js, line 3

Example

d3.selectAll('ul').last();

moveToBack()

Displays SVG element above the other ones.

Source:

moveToBack.js, line 1

Example

d3.select('svg circle').moveToBack();

moveToFront()

Displays SVG element below the other ones.

Source:

moveToFront.js, line 1

Example

d3.select('svg circle').moveToFront();

on(types, listener, capture) → {selection}

jQuery equivalent: $.on

Works like the normal on function but now you can pass multiple event types like you know it from jquery. We took this function from the awesome d3-jetpack

Parameters:

Name	Type	Description
`types`	string	-
`listener`	string	-
`capture`	string	-

Source:

on.js, line 5

Example

d3.select('li').on('click mouseenter mouseleave', function(d, i) {
  // do something
});

prepend(tagName) → {selection}

jQuery equivalent: $.prepend

Inserts elements as first child of the current selection. Returns the new elements as a D3 selection.

Parameters:

Name	Type	Description
`tagName`	string	The element to append

Source:

prepend.js, line 3

Example

d3.selectAll('li')
  .prepend('a')
  .text('Some Link')
  //do somethin else with the link

removeClass(className) → {selection}

jQuery equivalent: $.removeClass

Removes class from elements in the current selection. Returns current selection.

Parameters:

Name	Type	Description
`className`	string	The class to remove

Source:

removeClass.js, line 1

Example

d3.selectAll('ul').removeClass('active');
d3.selectAll('ul').removeClass('class-a class-b'); //will remove two classes

show() → {selection}

jQuery equivalent: $.show

Diplays the current selection. Returns the selection.

Source:

show.js, line 1

Example

d3.selectAll('.foo').show();

toggle() → {selection}

jQuery equivalent: $.toggle

Diplays or hides the current selection. Returns the selection.

Source:

toggle.js, line 1

Example

d3.selectAll('.foo').toggle();

toggleClass(className) → {selection}

jQuery equivalent: $.toggleClass

Adds or removes class from elements in the current selection. Returns current selection.

Parameters:

Name	Type	Description
`className`	string	The css class to toggle

Source:

toggleClass.js, line 1

Example

d3.selectAll('ul').toggleClass('active');
d3.selectAll('ul').toggleClass('class-a class-b'); //toggle multiple classes