Dairesel düğüme kare görüntü eklemek gerekiyor d3.js

Question

Merhaba Yuvarlak düğümlere kare görüntüler eklemeye çalıştığım ancak görüntü düğüm boyutuna kırpılıyor. Görüntüleri başarıyla ekledim ancak döngüsel düğümde kırpamıyor gibi görünebilir. Yanlış yaptığım şeyler hakkında bir fikrin var mı?

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); 

Ayrıca herhangi bir görüntü yoksa düğümü orada göstermek istiyorum.

Answer 1

svg klip yollarını kullanın.

Kod örnek:

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+")" });

svg { 
 
    background: grey; 
 
}

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

Bir kalıp kullanmak gerekir

Answer 2

Buradaki ilk yanıt, görüntü için maske olarak bir daire ayarlamanıza yardımcı olacağını düşünüyorum: Setting rounded corners for svg:image. Bunun dışında, SVG kullanmak gerçekten sizin için bir zorunluluk değilse, normal HTML ve CSS3 kullanarak grafikleri uygulayabilir ve <img> etiketlerinde eski border-radius: 50% veya bu konudaki kapsayıcılarını kullanabilirsiniz.