Исправить положение узла в D3 сило-направленном макете

Question

Я хочу, чтобы некоторые узлы в моей сило-ориентированной компоновке игнорировали силу и оставались в фиксированных положениях, основанных на атрибуте узла, в то же время имея возможность перетаскивать и вызывать отталкивание на других узлах и поддерживать их линии связи. Я думал, что это будет так просто:

    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 узла на галочку, но затем ссылки продолжают всплывать туда, где был бы узел, если бы на него воздействовала сила.

Очевидно, у меня есть базовое неправильное понимание того, как это должно работать, поэтому кто-то может указать мне на пример, где некоторые узлы зафиксированы в своем положении (но все еще перетаскиваются), а остальные узлы плавают вокруг, как сило-ориентированные, а все ссылки еще работают?

Answer 1

Задавать d.fixed на желаемых узлах, чтобы истина, и инициализировать d.x а также d.y в желаемое положение. Эти узлы все равно будут частью моделирования, и вы можете использовать обычный код отображения (например, установить атрибут преобразования); однако, поскольку они помечены как фиксированные, их можно перемещать только перетаскиванием, а не моделированием.

См. Документацию по силовой компоновке для получения дополнительной информации, а также посмотрите, как корневой узел расположен в этом примере.

Answer 2

Исправлены узлы в силовом макете для d3v4 и d4v5

В d3v3 d.fixed будет фиксировать узлы в d.x а также d.y; однако в d3v4/5 этот метод больше не поддерживается. Документация d3 гласит:

Чтобы зафиксировать узел в заданной позиции, вы можете указать два дополнительных свойства:

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 а также fy атрибуты для силовых узлов в вашем источнике данных, или вы можете добавлять и удалять fx а также fy значения динамически. Фрагмент ниже устанавливает эти свойства в конце событий перетаскивания, просто перетащите узел, чтобы зафиксировать его положение:

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>