Question

嗨我试图将方形图像添加到圆形节点，但将图像裁剪为节点大小。我已成功添加图像，但似乎无法将它们裁剪到圆形节点。关于我做错了什么的任何建议？

    var node = svg.selectAll(".node")
      .data(json.nodes)
      .enter().append("g")
      .attr("class", "node")
      .call(force.drag)
      .on('mouseover', connectedNodes)
      .on('mouseout', allNodes)
      .on('contextmenu', function(d){d3.event.preventDefault();tip.show(d);})  //.on('mousedown', tip.show)
    .on('mouseleave', tip.hide);

node.append("circle")
    .attr("r", function(d) { return d.degree;})
    .style("fill", function (d) {return color(d.group);})
    node.append("image")
        .attr("xlink:href",  function(d) { return d.image;})
        .attr("x", function(d) { return -25;})
        .attr("y", function(d) { return -25;})
        .attr("height", 50)
        .attr("width", 50);

如果没有任何图像，我也想在那里显示节点。

Answer 1

我认为这里的第一个答案将帮助您将圆圈设置为图像的蒙版：Setting rounded corners for svg:image。除此之外，如果您真的不需要使用SVG，则可以使用普通的HTML和CSS3实现图形，并在border-radius: 50%标签或其容器上使用旧的<img>。

Answer 2

使用svg剪辑路径。

代码示例：

＆＃13;

var nodes = [{
  "id": "0",
  "name": "ETCO I",
  "degree": 50,
  x: 100,
  y: 150

}, {
  "id": "1",
  "name": "PINKERTON Eidel ",  
  "degree": 25,
  x: 200,
  y: 100
}];

var container = d3.select("svg");

var node = container.append("g").selectAll(".node")
  .data(nodes)
  .enter()
  .append("g")
  .attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  });

node.append("clipPath")
  .attr("id",function(d,i){ return "node_clip"+i })
  .append("circle")
  .attr("r",function(d) {
    return d.degree-2; //-2 to see a small border line
  });


node.append("circle")
  .attr("r", function(d) {
    return d.degree;
  })
  .style("fill", "blue");

node.append("image")
  .attr("xlink:href", function(d) {
    return "https://image.freepik.com/free-icon/group-of-people-in-a-formation_318-44341.png";
  })
  .attr("x",function(d){ return -d.degree })
  .attr("y",function(d){ return -d.degree })
  .attr("height", function(d){ return d.degree*2 })
  .attr("width", function(d){ return d.degree*2 })
  .attr("clip-path",function(d,i){ return "url(#node_clip"+i+")" });

＆＃13;

svg {
  background: grey;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width=500 height=200></svg>

＆＃13;

需要将方形图像附加到圆形节点d3.js

2 个答案: