Question

我的目标是在我在D3可视化中创建的圆形化身周围添加边框。我使用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);创建这些圆形化身。当我向节点添加边框时，它是一个围绕整个节点的方形边框，而不是像I＆＃39; m瞄准的圆形（我明白为什么，因为这个节点是矩形的）。以下是目前的情况：

我挣扎着让这个边框出现在圆形的，剪裁的图像周围。

以下是我当前设置（矩形）边框的代码：

clip-path

...这就是我宣布我的var clipPath = defs.append('clipPath') .attr('id', 'clip-circle') .append('circle') .attr('r', 25);：

的方式

  if (input.contains("write")) {    
                    if(input.size() >=2) {

                        String key = input.get(1);                   
                        String value = "";
                        for(int i=2; i<input.size(); i++) {
                            value = value + " " + input.get(i);
                        }
                        mapWrite(key, value);
                    } else {
                        System.out.println("Please type in the key & value after write all on line");
                    }

                }

我的完整示例可以在这里找到： 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。

D3：在剪辑路径周围添加边框

1 个答案: