Sie müssen ein quadratisches Bild an einen kreisförmigen Knoten anhängen. D3.js

Question

Hi Ich versuche, quadratische Bilder zu kreisförmigen Knoten hinzuzufügen, aber das Bild auf die Knotengröße zu beschneiden. Ich habe die Bilder erfolgreich hinzugefügt, aber scheint sie nicht auf den kreisförmigen Knoten zu schneiden. Irgendwelche Vorschläge, was ich falsch mache?

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

Ich möchte auch den Knoten dort zeigen, wenn es kein Bild gibt.

Answer 1

Verwenden Sie Svg-Clip-Pfade.

Codebeispiel:

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>

Answer 2

Ich denke, die erste Antwort hier hilft Ihnen, einen Kreis als Maske für ein Bild zu setzen: Setting rounded corners for svg:image. Abgesehen davon, wenn die Verwendung von SVG nicht wirklich eine Voraussetzung für Sie ist, können Sie die Grafiken mit normalem HTML und CSS3 implementieren, und verwenden Sie gute alte border-radius: 50% Tags oder ihre Container für diese Angelegenheit.