74

力指向レイアウトの一部のノードで、すべての力を無視し、ノードの属性に基づいて固定位置にとどまりながら、ドラッグして他のノードに反発を加え、それらのリンクラインを維持できるようにします。

私はそれがこれと同じくらい簡単だろうと思いました：

force.on("tick", function() {
    vis.selectAll("g.node")
        .attr("transform", function(d) {
            return (d.someAttribute == true) ?
               "translate(" + d.xcoordFromAttribute + "," + d.ycoordFromAttribute +")" :
               "translate(" + d.x + "," + d.y + ")"
        });
  });

また、各ティックでノードのx属性とy属性を手動で設定しようとしましたが、力の影響を受けた場合にノードが存在する場所にリンクが浮き上がり続けます。

明らかに、私はこれがどのように機能するかについて基本的な誤解を持っています。リンクを維持しながら、ノードをドラッグ可能にしながら、ノードを特定の位置に固定するにはどうすればよいですか？

4

2 に答える 2

83

d.fixed目的のノードをtrueに設定し、初期d.x化d.yして目的の位置に設定します。これらのノードは引き続きシミュレーションの一部であり、通常の表示コードを使用できます（たとえば、変換属性の設定）。ただし、固定としてマークされているため、ドラッグによってのみ移動でき、シミュレーションでは移動できません。

詳細については、フォースレイアウトのドキュメント（v3ドキュメント、現在のドキュメント）を参照してください。また、この例でルートノードがどのように配置されているかも確認してください。

于 2012-05-01T15:34:38.983 に答える
44

d3v4およびd4v5の強制レイアウトのノードを修正しました

d3v3では、d.fixedノードをd.xとで修正しd.yます。ただし、d3v4 / 5では、このメソッドはサポートされなくなりました。d3のドキュメントには次のように記載されています。

ノードを特定の位置に固定するには、次の2つの追加プロパティを指定できます。

fx - the node’s fixed x-position

fy - the node’s fixed y-position

各ティックの終わりに、力を加えた後、node.fxが定義されているノードでは、node.xがこの値にリセットされ、node.vxがゼロに設定されます。同様に、node.fyが定義されているノードでは、node.yがこの値にリセットされ、node.vyがゼロに設定されます。以前に修正されたノードを修正解除するには、node.fxとnode.fyをnullに設定するか、これらのプロパティを削除します。

データソースのフォースノードの属性を設定fxしたり、値を動的に追加および削除したりできます。以下のスニペットは、ドラッグイベントの最後にこれらのプロパティを設定します。ノードをドラッグするだけで、その位置を修正できます。fyfxfy

var data ={ 
 "nodes": 
  [{"id": "A"},{"id": "B"},{"id": "C"},{"id":"D"}], 
 "links": 
  [{"source": "A", "target": "B"}, 
   {"source": "B", "target": "C"},
   {"source": "C", "target": "A"},
   {"source": "D", "target": "A"}]
}
var height = 250;
var width = 400;

var svg = d3.select("body").append("svg")
  .attr("width",width)
  .attr("height",height);
  
var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }).distance(50))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));
    
var link = svg.append("g")
  .selectAll("line")
  .data(data.links)
  .enter().append("line")
  .attr("stroke","black");

var node = svg.append("g")
 .selectAll("circle")
 .data(data.nodes)
 .enter().append("circle")
 .attr("r", 5)
 .call(d3.drag()
   .on("drag", dragged)
   .on("end", dragended));
 
simulation
 .nodes(data.nodes)
 .on("tick", ticked)
 .alphaDecay(0);

simulation.force("link")
 .links(data.links);
      
function ticked() {
 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("cx", function(d) { return d.x; })
   .attr("cy", function(d) { return d.y; });
}    
    
function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.6.0/d3.min.js"></script>

d3v6がイベントリスターに変更

上記のスニペットでは、ドラッグイベントはフォームを使用しています

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

dドラッグされているノードのデータムはどこにありますか。d3v6では、フォームは次のようになります。

function dragged(event) {
  event.subject.fx = event.x;
  event.subject.fy = event.y;
}

また：

function dragged(event,d) {
  d.fx = event.x;
  d.fy = event.y;
}

これで、イベントがリスナーに直接渡されます。イベントリスナーに渡される2番目のパラメーターはデータムです。これがObservableの標準的な例です。

于 2017-06-20T04:52:32.390 に答える