それで、ここで私は別の質問をします:私は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 + ")"; });
});
編集:グループの変換は、最終的に制限が表示された以外のデータを取得する理由です。適切な方法で両方の機能を提供する方法はありますか?