ノードを配置する方法CSSで強制グラフD3を強制的に使用しますか？

Question

私はD3でForce Directed Graphを作成しており、ノードのsvgサークルで作業しています。しかし、CSS leftとtopプロパティと組み合わせてdivを使用すると、ノードの位置がずれてしまいます。私はここで間違っていることを理解できません。私は、D3が左と上のプロパティとして生成するxとy座標を使用しますが、それは行く方法ではないでしょうか？ここで

は私のJSです：

var url = "https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json"; 

d3.json(url, function(json){ 

    var data = json; 

    var margin = {top: 40, right: 40, bottom: 40, left: 40}; 

    var w = 1000 - margin.left - margin.right; 
    var h = 1000 - margin.top - margin.bottom; 

    var svg = d3.select("#chart") 
       .append("svg") 
       .attr("width", w + margin.left + margin.right) 
       .attr("height", h + margin.top + margin.bottom) 
       .append("g") 
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    var nodes = data.nodes; 
    var links = data.links; 

    //Create a force layout object and define its properties 
    var force = d3.layout.force() 
       .size([w,h]) 
       .nodes(nodes) 
       .links(links); 

    force.linkDistance(h/20); 

    force.charge(-120) 

    var link = svg.selectAll(".link") 
       .data(links) 
       .enter() 
       .append("line") 
       .attr("class", "link"); 

    var node = d3.select("#chart").selectAll(".node") 
       .data(nodes) 
       .enter() 
       .append("div") 

    force.on("end", function(){ 
    //set node and link position attributes once force calculations have finished 

    //position the nodes 
    node.style("left", function(d){ 

      return d.x + "px"; 

     }) 
     .style("top", function(d){ 

      return d.y + "px"; 

     }) 
     .attr("class", function(d){ 

      return "flag flag-" + d.code + " node"; 

     }) 
     .attr("src", "https://res.cloudinary.com/dettjqo9j/image/upload/v1485942660/flags_xf9dde.png"); 

    link.attr("x1", function(d){ 

      return d.source.x; 

     }) 
     .attr("y1", function(d){ 

      return d.source.y; 

     }) 
     .attr("x2", function(d){ 

      return d.target.x; 

     }) 
     .attr("y2", function(d){ 

      return d.target.y; 

     }) 



    })//force.on 


    force.start(); 
    //let the force start its calculations 

}) 

マイCSS：codepenのこれまでの

svg { 

    background-color: white; 
    box-shadow: 0 0 10px #888888; 

} 

.link { 

    stroke: #2c3e50; 
    stroke-width: 2px; 

} 

.flag { 
    display: inline-block; 
    position:absolute; 
    width: 16px; 
    height: 11px; 
    background: url('https://res.cloudinary.com/dettjqo9j/image/upload/v1485942660/flags_xf9dde.png') no-repeat; 
} 

.flag.flag-ml { 
    background-position: -224px -88px; 
} 

グラフ：

https://codepen.io/chemok78/full/VPMgGx/

Answer 1

アカウントSVGでどのくらいのリンクについてウィンドウからオフセットされています：によってシフトされていますまた、<h1>および<h2>（加えて、詰め物）の高さだけ下がる。

例えば、私のブラウザでは、フラグは次のコードで正しい位置に見える：<div>フラグ要素もそのかかわらず、0のデフォルトleftとtop属性を持っているためであると

node.style("left", function(d){ 

     return d.x + margin.left + 150 + "px"; 

    }) 
    .style("top", function(d){ 

     return d.y + margin.top + "px"; 

    }) 

をお知らせ親は<div#chart>です。 150をハードコーディングしましたが、動的に計算する方法を工夫することもできます。

<circle>では動作しますが、<div>では動作しないのは、サークルがSVG要素と<svg>の子であるため、それらは既に正しい開始位置にあるからです。あなたはSVGs内のフラグを維持する別の解決策があるかもしれません：<g>または<rect>の代わり<div>としてノード、代わりにleftとtopのxとyの属性、<svg>代わりの<div#chart>の子を追加します。しかし、各フラグファイルの個別のURLを指していないため、各ノードにフラグを割り当てる実装方法については検討していません。

Answer 2

おかげで、すべて、

私はElement.getBoundingClientRect()を使用してグラフのSVGのg要素の位置を取得し、すべてのノードを配置しているの左上の位置を使用して終了しました。

//Get position of g element of the chart 
    var position = document.getElementById("area").getBoundingClientRect(); 

force.on("tick", function(){ 

    node.style("left", function(d){ 

      return d.x + position.left + "px"; 

     }) 
     .style("top", function(d){ 

      return d.y + position.top + "px"; 

     }) 
     .attr("class", function(d){ 

      return "flag flag-" + d.code + " node"; 

     }) 
     .attr("src", "https://res.cloudinary.com/dettjqo9j/image/upload/v1485942660/flags_xf9dde.png") 

    link.attr("x1", function(d){ 

      return d.source.x; 

     }) 
     .attr("y1", function(d){ 

      return d.source.y; 

     }) 
     .attr("x2", function(d){ 

      return d.target.x; 

     }) 
     .attr("y2", function(d){ 

      return d.target.y; 

     }) 

    })