Napraw pozycję węzła w układzie skierowanym siłą D3

Stałe węzły w układzie sił dla d3v4 i d4v5

W d3v3 d.fixed naprawi węzły w d.x i d.y; jednak w d3v4/5 ta metoda nie jest już obsługiwana. Dokumentacja d3 stwierdza:

Aby naprawić węzeł w danej pozycji, można określić dwa dodatkowe właściwości:

fx - the node’s fixed x-position

fy - the node’s fixed y-position

Na końcu każdego kleszcza, po przyłożeniu wszelkich sił, węzeł z określonym węzłem.fx ma węzeł.x reset do tego wartość i węzeł.zestaw vx do zera; podobnie węzeł o zdefiniowanym węźle.fy ma węzeł.y reset do ta wartość i węzeł.vy ustawione na zero. Aby rozwikłać węzeł, który był wcześniej naprawiony, Ustaw węzeł.fx i node.fy do null, lub usunąć te właściwości.

Możesz ustawić atrybuty fx i fy dla węzłów siły w źródle danych, lub możesz dynamicznie dodawać i usuwać wartości fx i fy. Poniższy fragment ustawia te właściwości na końcu zdarzeń przeciągnij, po prostu przeciągnij węzeł, aby naprawić jego pozycja:

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 zmiany na liście zdarzeń

W powyższym fragmencie zdarzenia przeciągania używają formularza

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

Gdzie d jest punktem odniesienia przeciąganego węzła. W d3v6 postać jest teraz:

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

Lub:

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

Zdarzenie jest teraz przekazywane bezpośrednio do słuchacza, drugim parametrem przekazywanym do słuchacza zdarzeń jest datum. Oto kanoniczny przykład na Observable.