d3.jsリンクとノードの一致

Question

長方形のグラフを作成し、ノードのY軸を固定して、X軸だけで移動できるようにしました。しかし、私はこれをして以来、リンクや行はどこに行っても、私はこの問題を解決する方法を知らない。 （My graph）。

はここに私のコードです：コードなし

function arbre(graph) { // graph is my Json file 
     var width = 1000, 
      height = 1000, 
      wrect=300, 
      hrect=400; 
     var color = d3.scale.category20(); 
     var nodes=graph.nodes; 
     var root = nodes[0]; 
     var stx=sty=50; 

     root.fixed = true; 
     root.x = 400; 
     root.y = 30; 

     //on ajoute les paramètre x2 et y2 au noeud 
     for(var key in nodes) 
     { 
      nodes[key].x2=wrect; 
      nodes[key].y2=hrect; 
     } 

     var force = d3.layout.force() 
      //.charge(-200) // -120 200 
      //.alpha(0); 
      .linkDistance(50) // 20 200 
      .gravity(0.5) 
      .charge(function(d, i) { return i ? 0 : -2000; }) 
      .size([width, height]); 

     // définition des noeuds et des liens de la force 
     force.nodes(nodes) 
       .links(graph.links) 
       .start(); 

     var svg = d3.select("#graph") 
      .append("svg") 
      .attr("width", width) 
      .attr("height", height); 


      // création des liens sous forme de lignes 
      var link = svg.selectAll(".link") 
       .data(graph.links) 
       .enter() 
       .append("g")     // groupe pour les links 
       .attr("class","link-group") 
       .append("line") 
       .attr("class", "link") 
       .style("stroke-width", function(d) { return Math.sqrt(d); }); 

      // création des nodes sous forme de rectangles 
      var node = svg.selectAll(".node") 
       .data(nodes) 
       .enter() 
       .append("g") 
       .attr("class","node-group") 
       .append("rect") 
       .attr("class", "node") 
       .attr("width", wrect) 
       .attr("height", hrect) 
       .style("fill", function(d) { return color(d.data.id_projet); }) 

       .attr("y", function(d) {if(d.type == 'convention') d.y = 300;})//return 300; }) 
       .call(force.drag); 

      // Ajouter des infos au rectangles 
      var id = svg.selectAll(".node-group") 
        .data(graph.nodes) 
        .append("text") 
        .text(function(d) {if(d.type == 'projet')return d.data.id_projet; }) 
        .attr("font-family", "sans-serif") 
        .attr("font-size", "10px"); 


      var acronyme = svg.selectAll(".node-group") 
        .data(graph.nodes) 
        .append("text") 
        .text(function(d) {return d.data.acronyme_projet; }) 
        .attr("font-family", "sans-serif") 
        .attr("font-size", "10px"); 

      // la fonction tick 
      force.on("tick", function(e){ 
       var q = d3.geom.quadtree(nodes), 
       i = -1, 
       n = nodes.length; 

      console.log(nodes); 
       // traitement de la collision des rectangles 
       while (++i < n) 
       { 
       q.visit(collide(nodes[i])); 
       } 

      // mise à jour des positions des rectangles et des lignes  
      node.attr("x", function(d) { return d.x; }) 
       //.attr("y", function(d) { return d.y; }); 
       .attr("y", function(d) { 
       if(d.type == "projet") return d.y; 
       if(d.type == "convention") return 300; 
       if(d.type == "budget") return 600; 
       }); 
      console.log(nodes); 
      link.attr("x1", function(d) { return d.source.x+stx; }) // d: data() of links 
       .attr("y1", function(d) { return d.source.y+stx; }) 
       .attr("x2", function(d) { return d.target.x+stx; }) 
       .attr("y2", function(d) { return d.target.y+stx; }); 

      // positionnement du text dans les rectangles  
      id.attr("x", function(d) { return d.x+2; }) // d: data() of texte 
       .attr("y", function(d) { return d.y+10; }); 

      acronyme.attr("x", function(d) { return d.x+2; }) // d: data() of texte 
        .attr("y", function(d) { return d.y+20; });       
      }); 

      // to avoid overlapping 
      function overlap(a, b){ 

      if(((a.x < b.x && b.x < a.x2) && (a.y < b.y && b.y < a.y2)) || ((a.x < b.x2 && b.x2 < a.x2) && (a.y < b.y2 && b.y2 < a.y2))) 
      { 
       return true; 
      } 
     } 

    //-------------my collision function 
     function collide(node) { 

       node.x2=node.x+wrect; 
       node.y2=node.y+hrect; 

      var nx1, nx2, ny1, ny2, padding; 
      padding = 20; 
      nx1 = node.x - padding; 
      nx2 = node.x2 + padding; 
      ny1 = node.y - padding; 
      ny2 = node.y2 + padding; 
     console.log(node.x,node.x2,node.y,node.y2); 
     console.log(nx1, nx2, ny1, ny2, padding); 

      return function(quad, x1, y1, x2, y2) { 
      console.log(quad, x1, y1, x2, y2); 
      var dx, dy; 
      if (quad.point && (quad.point !== node)) { 
      if (overlap(node, quad.point)) { 

      console.log(node.x2,quad.point.x, quad.point.x2, node.x); 
      console.log(node.x2-quad.point.x, quad.point.x2 - node.x); 
      dx = Math.min(node.x2 - quad.point.x, quad.point.x2 - node.x)/2; 
      node.x -= dx; 
      quad.point.x += dx; 
      dy = Math.min(node.y2 - quad.point.y, quad.point.y2 - node.y)/2; 
      node.y -= dy; 
      quad.point.y += dy; 
      } 
     } 
     return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1; 
     }; 
    }; 
} 

Answer 1

、私はあなたの箱のy座標を変更後を描画を更新していなかったと言うだけですることができます。指示の順序を確認すると、これを修正できるはずです。

それがより明確にするために、あなたはおそらく命令の次の配列を有する：

• エッジ
• 変更Yはあなたが必要なノード

を描く

座標描きます2位を引き上げる：

• 変更Yエッジ
• を描くコードは本当に参考になる