BTS Profiles Part 2

bts-profiles-2.rst

BTS Profiles Part 2 - Show Image

Use Data Update Pattern

1. select
2. data
3. exit
4. update
5. enter
6. append

function showImage(memberName) {
  let imageFile;
  if (memberName == "Kim Namjoon") {
    imageFile = 'assets/kim-namjoon-150x150-circle.png';
  } else if (memberName == 'Kim Seokjin') {
    imageFile = 'assets/kim-seokjin.png';
  }

  /**
   * As there is only a single image, there is an easier way
   * to do this.  We are using the 6 step pattern for practice.
   * it is longer to do it this way, but good practice for future
   * projects where there is a larger dataset
   *
   *  1. select
   *  2. data
   *  3. exit
   *  4. update
   *  5. enter
   *  6. append
   */

  const images = svg.selectAll('image')  // 1. select all images
    .data([imageFile]);  // 2. bind all images to data

  images
    .exit().remove();   // 3. exit and remove unused elements

  images                // 4. update image elements on screen
    .attr('xlink:href', d => d)
    .attr('x', '0')
    .attr('y', '100')
    .attr('width', '150')
    .attr('height', '150')
    .attr('opacity', '0.1')
    .transition()
    .attr('x', '300')      // if there were multiple images, we'd need to update this
    .attr('opacity', '1.0')
    .duration(700);

  images.enter()    // 5. enter and return images to print to screen (none)
    .append('image')   // 6. append new images to screen (there are none)
    .attr('xlink:href', d => d)
    .attr('x', '0')
    .attr('y', '100')
    .attr('width', '150')
    .attr('height', '150')
    .attr('opacity', '0.1')
    .transition()
    .attr('x', '300')
    .attr('opacity', '1.0')
    .duration(700);
}