d3強制直接頂点のバッジを表示する方法

カンバスを使用してレンダリングされるd3強制レイアウト頂点で、数カウントを示すバッジを追加する方法。何かのようなもの。円の形の中に図形を追加して貼り付けることはできますか？d3強制直接頂点のバッジを表示する方法

<!DOCTYPE html> 
<html> 
<head> 
    <title>Sample Graph Rendring Using Canvas</title> 
    <script src="https://rawgit.com/gka/randomgraph.js/master/randomgraph.js"></script> 
    <script src="https://d3js.org/d3.v4.min.js"></script> 
</head> 
<body> 
<script> 
var graph = randomgraph.WattsStrogatz.beta(15, 4, 0.06); 

var canvas = null; 
var width = window.innerWidth, 
height = window.innerHeight; 
canvas = d3.select("body").append("canvas").attr("width", width).attr("height", height); 

var context = canvas.node().getContext("2d"); 

force = d3.forceSimulation() 
    .force("link", d3.forceLink().id(function (d) { 
      return d.index; 
     })).force("charge", d3.forceManyBody()) 
    .force("center", d3.forceCenter(width/2, height/2)); 

force.nodes(graph.nodes); 
force.force("link").links(graph.edges).distance(200); 

var detachedContainer = document.createElement("custom"); 
dataContainer = d3.select(detachedContainer); 

link = dataContainer.selectAll(".link").data(graph.edges) 
    .enter().append("line").attr("class", "link") 
    .style("stroke-width", 2) 

    node = dataContainer.selectAll(".node").data(graph.nodes) 
    .enter().append("circle") 
    .attr("class", function (d) { 
     return "node node_" + d.index; 
    }) 
    .attr("r", 5) 
    .attr("fill", 'red') 
    .attr("strokeStyle", 'black'); 

d3.timer(function() { 
    context.clearRect(0, 0, width, height); 

    // draw links 
    link.each(function (d) { 
     context.beginPath(); 

     context.moveTo(d.source.x, d.source.y); 
     context.lineTo(d.target.x, d.target.y); 

     context.closePath(); 

     context.strokeStyle = "#ccc"; 
     context.stroke(); 
    }); 

    context.lineWidth = 2; 
    node.each(function (d) { 

     context.beginPath(); 
     context.moveTo(d.x, d.y); 
     var r = this.getAttribute('r'); 

     d.x = Math.max(30, Math.min(width - 30, d.x)); 
     d.y = Math.max(30, Math.min(height - 30, d.y)); 

     context.arc(d.x, d.y, r, 0, 2 * Math.PI); 
     context.closePath(); 
     context.fillStyle = this.getAttribute('fill'); 
     context.strokeStyle = this.getAttribute('strokeStyle'); 

     context.stroke(); 
     context.fill(); 
    }); 

}); 

node.transition().duration(5000).attr('r', 20).attr('fill', 'orange'); 

canvas.node().addEventListener('click', function (event) { 
    // Its COMING ANY TIME INSIDE ON CLICK OF CANVAS 
}); 
</script> 
</body> 
</html>

出典

2017-10-05 Sumeet

私はあなたのデータを結合に 'G'を使用することをお勧めし取り組んでいます。したがって、あなたの '.enter（）'の直後に 'circle'を追加するのではなく、' g'要素を使用して、 'x'と' y'をフォースタイマ関数に配置してください。ラベルなどを表示するために、サークルやその他の要素をそのグループに簡単に追加することができます。最初に 'circle 'の代わりに' g'要素を配置すると、それらがすべて正しく配置されるようになります。 –

似たようなものを私に与えることができますか？私はd3の初心者です@AntonvB – Sumeet

この例を見てください - > https： //bl.ocks.org/mbostock/950642。各力点のアイコンとラベルを配置しています。あなたがしようとしているものに非常に似ています。データ入力にsvgグループ要素を追加してから、そのグループにサークルとラベルを追加することがわかります。 –

あなたはこのようにそれを行うことができます。

まず、このようなグループに追加：グループに

node = dataContainer.selectAll(".node").data(graph.nodes) 
       .enter().append("g");

次へ]を次のように円を追加。あなたのキャンバスを再描画タイマーで

circles.transition().duration(5000).attr('r', 20).attr('fill', 'orange');

var circles = node.append("circle") 
     .classed("circle-class", true) 
     .attr("class", function (d){ return "node node_" + d.index;}) 
     .attr("r", 5) 
     .attr("fill", 'red') 
     .attr("strokeStyle", 'black');

次は、このような円への移行を追加します。円にする円内にテキストを作成します。

//make the small circle 
    context.beginPath(); 
    context.arc(d.x + 15, d.y-20, 5, 0, 2 * Math.PI);//circle with fixed radius of 5 
    context.fillStyle = "orange"; 
    context.strokeStyle = "orange"; 
    //get the data from the group 
    var data = d3.select(this).data(); 
    context.stroke(); 
    context.fill(); 
    context.font = "10px Arial"; 
    context.fillStyle = "black"; 
    context.strokeStyle = "black"; 
    //write the text in the context 
    context.fillText(parseInt(data[0].index),d.x + 10, d.y-15);

コードhere

出典

2017-10-05 11:18:01 Cyril

あなたの答えは素晴らしいです、私はこれで直面することができる2つの問題を考えています。 – Sumeet

文字列の長さを調べることにより、xのテキストをプログラムする必要があるでしょう。 – Cyril

どのようにして矢印をエッジに追加できますか – Sumeet

d3強制直接頂点のバッジを表示する方法

答えて

関連する問題