title: How to use D3 clip path on image within a function
body: <p>I'd like to be able to mask images with a circle. I can do this with D3, however I'm having trouble working this into my update loop. Below is my best attempt:</p>
  
  <p><a href="https://jsfiddle.net/tmqs78b4/" rel="nofollow">Fiddle</a></p>
  
  <p>I have defined the clip path with id '#ellipse-clip', but when I set this as an attribute on my images, the clip doesn't take effect. What am I doing wrong?</p>
  
  <pre><code>  var w = 300,
        h = 200;
    var barHeight = 20;
  
    var data = 
  
    championsleague = [{
      "name": "Hart",
      "saves": "9",
      "total": "15",
      "image": "https://upload.wikimedia.org/wikipedia/commons/4/41/Joe_Hart_69775.jpg"
    }, {
      "name": "Subasic",
      "saves": "6",
      "total": "10",
      "image": "https://upload.wikimedia.org/wikipedia/commons/4/41/Joe_Hart_69775.jpg"
    },];
  
    premierleague = [{
      "name": "Neuer",
      "saves": "12",
      "total": "27",
      "image": "https://upload.wikimedia.org/wikipedia/commons/4/41/Joe_Hart_69775.jpg"
    }, {
      "name": "Forster",
      "saves": "13",
      "total": "22",
      "image": "https://upload.wikimedia.org/wikipedia/commons/4/41/Joe_Hart_69775.jpg"
     }];
  
  
  // config, add svg
    var canvas = d3.select('#chart')
      .append('svg')
      .attr('width', w)
      .attr('height', h)
      .append('g')
      .attr("transform", "translate(0,70)");
  
  // config, add groups
  
    var name_g = canvas.append('g')
        .attr("transform", "translate(80,0)");
  
    var image_g = canvas.append('g');
  
    var clip = image_g.append("clipPath");
  
    var Scale = d3.scale.linear().domain([0, 39]).range([0, w]);
  
   // function that wraps around the d3 pattern (bind, add, update, remove)
    function updateLegend(data) {
  
   // bind data
  
    var clip = image_g
        .selectAll('ellipse')
        .data(data);
  
    var image = image_g
        .selectAll('image')
        .data(data);
  
      var name = name_g
          .selectAll('text')
          .data(data);
  
      // add new elements
  
      name.enter().append('text');
      clip.enter().append('ellipse').attr("id", "ellipse-clip");
      image.enter().append('image');
  
      // update existing elements
  
      name.transition()
      .duration(200)
      .text(function(d) {return d.name;
      })
      .attr('x', 0)
       .attr('y', function(d, i) {return i * (h / data.length) -10
       });
  
      clip.transition()
      .duration(200) 
      .attr("cx", 25)        
      .attr("cy", function(d, i) {return i * (h / data.length) - 25
      })        
      .attr("rx", 30)        
      .attr("ry", 30);  
  
      image.transition()
      .duration(200)
      .attr('xlink:href', function(d) {return d.image;
           })
      .attr('x', 0)
      .attr('y', function(d, i) {return i * (h / data.length) -50
      })
      .attr('width', 80)
      .attr('height', 80)
      .attr("clip-path", "url(#ellipse-clip)"); 
  
      // remove old elements
  
      name.exit().remove();
      clip.exit().remove();
      image.exit().remove();
  
      };
  
      // generate initial legend
      updateLegend(data);
  
      // handle on click event
      d3.selectAll('.opts')
       .on('click', function() {
       var data = eval(d3.select(this).property('value'));
          updateLegend(data);
       })
  </code></pre>