Question

我希望能够用圆圈遮住图像。我可以用D3做到这一点，但是我在使用它进入更新循环时遇到了麻烦。以下是我最好的尝试：

我已经使用id＆＃39;＃ellipse-clip＆＃39;定义了剪辑路径，但是当我将其设置为我的图片上的属性时，剪辑不会生效。我做错了什么？

ExternalProject

Answer 1

首先，您的代码有点令人困惑，多个g都绑定到相同的数据，并且文本与剪切的图像分开。我可能会重构一下，为每个包含clippath（具有唯一ID），图像和文本的玩家创建g ...

但回答你的真实问题你的SVG是不合适的。最后你需要这样的东西：

<g>
   <clipPath id="ellipse-clip"> <!-- id on clipPath with ellipse as child -->
     <ellipse ry="30" rx="30" cy="-25" cx="25"></ellipse>
     <ellipse ry="30" rx="30" cy="75" cx="25"></ellipse>
   </clipPath>
   <image clip-path="url(#ellipse-clip)" height="80" width="80" y="-50" x="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://upload.wikimedia.org/wikipedia/commons/4/41/Joe_Hart_69775.jpg"></image>
   <image clip-path="url(#ellipse-clip)" height="80" width="80" y="50" x="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://upload.wikimedia.org/wikipedia/commons/4/41/Joe_Hart_69775.jpg"></image>
</g>

有了这个想法，这里有更新的代码：

＆＃13;

 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 clipPath = image_g.append("clipPath").attr("id", "ellipse-clip");
  
  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 = clipPath
      .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');
  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);
  })

＆＃13;

<script data-require="d3@*" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>


  
<button class="opts champ" value="championsleague">Champions League</button>
<button class="opts prem" value="premierleague">Premier League</button>

<div id="chart"></div>

＆＃13;

如何在函数内的图像上使用D3剪辑路径

1 个答案: