Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
BTS Profiles Part 2

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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.