1

それで、ここで私は別の質問をします:私はD3でネットワークをセットアップしています。そのノードはすべて固定されていませんが、1つです。固定されていないものはすべて、svg内で、好きな場所にドラッグできます。これを提供するために、スクリプトの最後で新しい座標をテストします。しかし、固定ノードを移動すると、他のすべてがこれと一緒にドラッグされます。私の問題は、ノードが親オブジェクト(この場合はグループドラッグを提供するg-Elements)を基準にして座標を取得しているように見えることです。したがって、ドラッグした後も制限はありますが、グループと一緒にシフトされます。役立つヒントを歓迎します:)そしてここに私のコードの一部があります:

var node = group.selectAll(".node")
    .data(reqNodes)                                             
 .enter().append("g")                                   
    .attr("transform", function(d) { return "translate(0,0)"; })
    .attr("class", function(d) {
       return d.fixed ? 'node fixed' : 'node not-fixed';
     })

var CurrentGTransformX = 0;
var CurrentGTransformY = 0;

group.selectAll('.not-fixed')
  .call(force.drag);

  // attach a different drag handler to the fixed node
var groupDrag = d3.behavior.drag()
  .on("drag", function(d) {
    // mouse pos offset by starting node pos
    var x = window.event.clientX - 420,
    y = window.event.clientY - 260;
    group.attr("transform", function(d) { return "translate(" + x + "," + y + ")"; });    
              //that was the line getting in conflict with the part in the end
    CurrentGTransformX = x;
    CurrentGTransformY = y;
  });

group.call(groupDrag);

force.on("tick", function() {
   node.attr("cx", function(d) { return d.x = Math.max(15, Math.min(width - 15, d.x)); })
       .attr("cy", function(d) { return d.y = Math.max(15, Math.min(height - 15, d.y)); });

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

  node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});

編集:グループの変換は、最終的に制限が表示された以外のデータを取得する理由です。適切な方法で両方の機能を提供する方法はありますか?

4

0 に答える 0