円形ノードd3.jsに正方形の画像を追加する必要があります

Question

こんにちは、正方形の画像を円形のノードに追加しようとしていますが、画像をノードのサイズに切り取っています。 Iveはイメージを正常に追加しましたが、円形ノードにイメージを切り抜けるように見えません。私が間違っていることに関する提案はありますか？

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

svgクリップパスを使用します。

コードサンプル：

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

ここの最初の答えは、画像のマスクとして円を設定するのに役立ちます：Setting rounded corners for svg:imageと思います。 それ以外の場合は、SVGが本当に必要条件でない場合は、通常のHTMLとCSS3を使用してグラフィックスを実装して、タグで良い古いborder-radius: 50%タグを使用するか、