selectify

Generic array for manipulating styles and attributes. Heavily inspired by the wonderful selections from d3, but works with more generic objects, not just DOM elements! Includes CSS-oriented methods like style and classed, but can easily be extended to add custom methods. And the input is just an array, so initial selection can be handled elsewhere, and return this object for further manipulation. As an example, see it used for manipulating 3D scenes in gl-scene.

install

Add to your project with

npm install selectify --save

example

Create a selection from an array

var selectify = require('selectify')
var selection = selectify([{id: 'apple', className: 'fruit'}, {id: 'orange', className: 'fruit'}])

you can now set styles

selection.style({color: 'rgb(255, 0, 0)'})

or classes

selection.classed('cirtrus', function (d) {return d.id === 'orange'})

and evaluate functions

selection.each(function (d) {
	console.log('id: ' + d.id)
	console.log('class: ' + d.className)
	console.log('style: ' + JSON.stringify(d.style))
})

which in this example will return

id: apple
style: {"color":"rgb(255, 0, 0)"}
class: fruit
id: orange
style: {"color":"rgb(255, 0, 0)"}
class: fruit citrus

see below for all included methods, or how to extend with your own!

methods

selection.each(function)

Evaluates a function on each element. The first input to the function will be the element, the second optional input will be the index.

selection.style(name[,value])

Set a style on each element by updating the style property. Can provide either a single object argument selection.style({name: value}) or two arguments selection.style(name, value). Can also provide a function for value, which will be evaluated on each item to determine the property value. If the function returns undefined, the property will be removed.

selection.attr(name[,value])

Set an attribute on each element by updating the attributes property. Otherwise works identically to style.

selection.classed(name[,value])

Set one or more classes on each element by updating the className property. Can provide a single class in the form name or a list of multiple classes specified by spaces in the form name1 name2 name3. If value is truthy it will determine whether to add or remove the class. If not provided, it will return a list of whether or not each element of the selection has the specified class.

selection.toggleClass(name)

Add one or more classes (if not already present), or remove them (if already present).

selection.select(selector)

Return a sub selection matching a string specifier of the form #id or .class. A string without a tag will be treated as an id. Will return the first element that matches. If no matching items, will return null.

selection.selectAll(selector)

Return a sub selection matching a string specifier of the form #id or .class. A string without a tag will be treated as an id. Will return all elements that match. If no matching items, will return null.

extending

You may want to extend selectify with your own custom methods. It's easy to do with inherits. Here's an example. First, the usual boilerplate

var selectify = require('selectify')
var inherits = require('inherits')

inherits(myselectify, selectify)

function myselectify (items) {
  if (!(this instanceof myselectify)) return new myselectify(items)
  myselectify.super_.call(this, items)
}

Then add a method log

myselectify.prototype.log = function () {
  return this.each(function (d) {
    console.log(d.id)
  })
}

If we now create a selection we can use our new method

var selection = myselectify([{id: 'apple'}, {id: 'orange'}])
selection.log()

to get

apple
orange