javascript - D3 : Add border around clip-path

Question

我的目标是在我在 D3 可视化中创建的圆形头像周围添加边框。我使用 clip-path 创建了这些圆形头像。当我向我的节点添加边框时，它是围绕整个节点的方形边框，而不是像我想要的那样是圆形的(我明白为什么，因为这个节点是矩形的)。这是当前的样子:

我正在努力让这个边框出现在圆形、剪裁的图像周围。

这是我当前设置(矩形)边框的代码:

var nodeEnter = node.enter().append('svg:g')
  .attr('class', 'node')
  .attr('cursor', 'pointer')
  .attr('style', function(d) {
    var color;
    if (d.strength > 2) {
      color = 'blue';
    } else {
      color = 'red';
    }
    return 'outline: thick solid ' + color + ';';
  })
  .attr('transform', function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  })
  .call(force.drag);

...这就是我声明clip-path的方式:

var clipPath = defs.append('clipPath')
  .attr('id', 'clip-circle')
  .append('circle')
  .attr('r', 25);

我的完整示例可以在这里找到: http://blockbuilder.org/MattDionis/5f966a5230079d9eb9f4

我如何将其设置为围绕图像的圆形边框而不是围绕整个节点的矩形？

Answer 1

您可以在您的节点中添加一个半径稍大的圆(然后是您的剪辑路径):

   nodeEnter.append('circle')
      .attr('r',30)
      .style('fill', function(d) {
        return d.strength > 2 ? 'blue' : 'red'
      });

    var images = nodeEnter.append('svg:image')
      .attr('xlink:href',  function(d) {
        return d.avatarUrl;
      })
      .attr('x', function(d) {
        return -25;
      })
      .attr('y', function(d) {
        return -25;
      })
      .attr('height', 50)
      .attr('width', 50)
      .attr('clip-path', 'url(#clip-circle)');

已更新 code .