Skip to content

1.Selection

Jump to bottom
yuanlii edited this page Jun 30, 2019 · 21 revisions

Selection

  • D3.select --> selects the first matching element
  • d3.selectAll --> selects all matching elements.

Update selection with functions

an example:

d3.selectAll('circle')
.attr('cx', function(d, i) {
	return i * 100;
});
  • d is the joined data
  • i is the index of the element within the selection

Another example (entire code):

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <title>Learn D3.js</title>
    </head>

    <style>
        rect {
	        fill: #ddd;
        }        
    </style>

    <body>
        <!-- begin by creating several squares  -->
        <svg width='800' height='600'>
            <g transform="translate(70, 20)">
                <rect width="30" height="30" y="0" />
                <rect width="30" height="30" y="40" />
                <rect width="30" height="30" y="80" />
                <rect width="30" height="30" y="120" />
            </g>
        </svg>

        <!-- define an action button -->
        <div class="menu">
            <button onClick="update();">Click to update rect elements using function(d, i)</button>
        </div>
        
        <script src="https://d3js.org/d3.v4.min.js"></script>
        <!-- reference to index.js -->
        <script src="index.js"></script>
    </body>
</html>

selection_square

Oftentimes will use anonymous function, but can also use named function as below:

function positionRects(d, i) {
	return i * 40;
  }

function update() {
	d3.selectAll('rect')
		.attr('x', positionRects
		);
}

Event Handler

We can add event handlers to selected elements using .on which expects a callback function into which is passed two arguments d and i. | "Event Call-back Function"

  • d is the joined data
  • i is the index of the element within the selection.
d3.selectAll('circle')
  .on('click', function(d, i) {
	// in the event call-back function, "this" variable is bound to DOM element
    d3.select(this)
      .style('fill', 'orange');
  });

Note that this is a DOM element and not a D3 selection so if we wish to modify it using D3 we must first select it using d3.select(this).

Inserting and removing elements

  • .append - Elements can be added to a selection; commonly used in the context of enter/exit where it has different behaviour;
  • .insert - add elements to a selection; .insert is similar to .append but it allows us to specify a before element to which, you guessed it, the new element is attached.
  • .remove - elements can be removed

an example of .append(): img

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <title>Learn D3.js</title>
    </head>

    <style>
        body {
            font-family: "Helvetica Neue", Helvetica, sans-serif;
            font-size: 14px;
            color: #333;
        }   
        circle {
	        fill: orange;
        }  
        g.item text {
            fill: #ddd;
            font-size: 70px;
            text-anchor: middle;
            font-weight: bold;
        }
    </style>

    <body>
        <!-- create an empty container first -->
        <svg width='800' height='140'>
            <g transform="translate(70, 70)">
                <g class="item" transform="translate(0, 0)"><circle r="40" /></g>
                <g class="item" transform="translate(120, 0)"><circle r="40" /></g>
                <g class="item" transform="translate(240, 0)"><circle r="40" /></g>
            </g>
        </svg>
        
        <script src="https://d3js.org/d3.v4.min.js"></script>
        <!-- reference to index.js -->
        <script>
            d3.selectAll('g.item')
            .append('text')
            // add text to each g.item
            .text(function(d, i) {
                return i + 1;
            })
            //   specify the position of the item
                .attr('y', 50)
                .attr('x', 30);

        </script>
    </body>
</html>

Another example of using .insert():

d3.selectAll('g.item')
   // insert text before circle
  .insert('text', 'circle')
  .text(function(d, i) {
    return i + 1;
  });

and it would look like below: img

Clone this wiki locally