D3 принудительно направленная компоновка с ограничительной рамкой

Я новичок в D3, и у меня возникли проблемы с установкой границ для моего силового макета. Мне удалось собрать (из примеров) то, что я хотел бы, но мне нужно, чтобы граф содержался. В функции тика преобразование/перевод будет правильно отображать мой график, но когда я использую cx и cy с Math.max/min (см. прокомментированный код), узлы закрепляются в верхнем левом углу, а линии содержатся правильно.

Вот что у меня ниже... что я делаю не так??

var w=960, h=500, r=8,  z = d3.scale.category20();

var color = d3.scale.category20();

var force = d3.layout.force()
       .linkDistance( function(d) { return (d.value*180) } )
       .linkStrength( function(d) { return (1/(1+d.value)) } )
       .charge(-1000)
       //.gravity(.08)
       .size([w, h]);

var vis = d3.select("#chart").append("svg:svg")
       .attr("width", w)
       .attr("height", h)
       .append("svg:g")
       .attr("transform", "translate(" + w / 4 + "," + h / 3 + ")");

vis.append("svg:rect")
   .attr("width", w)
   .attr("height", h)
   .style("stroke", "#000");


d3.json("miserables.json", function(json) {

       var link = vis.selectAll("line.link")
               .data(json.links);

       link.enter().append("svg:line")
               .attr("class", "link")
               .attr("x1", function(d) { return d.source.x; })
               .attr("y1", function(d) { return d.source.y; })
               .attr("x2", function(d) { return d.source.x; })
               .attr("y2", function(d) { return d.source.y; })
               .style("stroke-width", function(d) { return (1/(1+d.value))*5 });

       var node = vis.selectAll("g.node")
               .data(json.nodes);

       var nodeEnter = node.enter().append("svg:g")
               .attr("class", "node")
               .on("mouseover", fade(.1))
               .on("mouseout", fade(1))
               .call(force.drag);

       nodeEnter.append("svg:circle")
               .attr("r", r)
               .style("fill", function(d) { return z(d.group); })
               .style("stroke", function(d) { return
d3.rgb(z(d.group)).darker(); });

       nodeEnter.append("svg:text")
               .attr("text-anchor", "middle")
               .attr("dy", ".35em")
               .text(function(d) { return d.name; });

       force
       .nodes(json.nodes)
       .links(json.links)
       .on("tick", tick)
       .start();

       function tick() {

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

       // This contains the lines within the boundary, but the nodes are
stuck in the top left corner
               //node.attr("cx", function(d) { return d.x = Math.max(r, Math.min(w
- r, d.x)); })
               //      .attr("cy", function(d) { return d.y = Math.max(r, Math.min(h -
r, 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; });
       }

       var linkedByIndex = {};

   json.links.forEach(function(d) {
       linkedByIndex[d.source.index + "," + d.target.index] = 1;
   });

       function isConnected(a, b) {
       return linkedByIndex[a.index + "," + b.index] ||
linkedByIndex[b.index + "," + a.index] || a.index == b.index;
   }

       function fade(opacity) {
       return function(d) {
           node.style("stroke-opacity", function(o) {
                       thisOpacity = isConnected(d, o) ? 1 : opacity;
                       this.setAttribute('fill-opacity', thisOpacity);
               return thisOpacity;
                       });

                       link.style("stroke-opacity", opacity).style("stroke-opacity",
function(o) {
               return o.source === d || o.target === d ? 1 : opacity;
               });
       };
       }

});

person Michael Wilson    schedule 05.03.2012    source источник
comment
Я поигрался с некоторыми параметрами и решил, что если у кого-то нет решения, я просто буду использовать много .gravity(). Если граф очень большой, он все равно будет представлять проблему, но в остальном он должен содержать узлы.   -  person Michael Wilson    schedule 06.03.2012


Ответы (3)


В моем пример ограничивающей рамки. 29458354">разговор о силовых раскладках. Интеграция Verlet позволяет вам определять геометрические ограничения (например, ограничивающие рамки и обнаружение столкновений) внутри прослушиватель событий «тик»; просто переместите узлы в соответствии с ограничением, и симуляция будет адаптироваться соответствующим образом.

Тем не менее, гравитация, безусловно, является более гибким способом решения этой проблемы, поскольку она позволяет пользователям временно перетаскивать график за пределы ограничивающей рамки, а затем график восстанавливается. В зависимости от размера графика и размера отображаемой области вам следует поэкспериментировать с различными относительными силами гравитации и заряда (отталкивания), чтобы ваш график соответствовал.

person mbostock    schedule 06.03.2012
comment
Ключом является add node.attr("cx", function(d) { return d.x = Math.max(r, Math.min(width - r, d.x)); }) .attr("cy", function(d) { return d.y = Math.max(r, Math.min(height - r, d.y)); });. Если вы используете path вместо line, вам также потребуется добавить проверку границ для `attr('d', function () {...});```. - person Limin; 30.05.2013
comment
@mbostock, есть ли способ указать координаты границ (перемещаться только внутри определенных 4 углов) - person Rishi0405; 22.11.2018

Пользовательская сила также является возможным решением. Мне нравится этот подход больше, так как не только отображаемые узлы перемещаются, но и вся симуляция работает с ограничивающей силой.

let simulation = d3.forceSimulation(nodes)
    ...
    .force("bounds", boxingForce);

// Custom force to put all nodes in a box
function boxingForce() {
    const radius = 500;

    for (let node of nodes) {
        // Of the positions exceed the box, set them to the boundary position.
        // You may want to include your nodes width to not overlap with the box.
        node.x = Math.max(-radius, Math.min(radius, node.x));
        node.y = Math.max(-radius, Math.min(radius, node.y));
    }
}
person Bruno Zell    schedule 12.07.2018

Закомментированный код работает с узлом, который, согласно вашему определению, является элементом svg g (rouping) и не использует атрибуты cx/cy. Выберите элемент круга внутри узла, чтобы оживить эти атрибуты:

node.select("circle") // select the circle element in that node
    .attr("cx", function(d) { return d.x = Math.max(r, Math.min(w - r, d.x)); })
    .attr("cy", function(d) { return d.y = Math.max(r, Math.min(h - r, d.y)); });
person Marc    schedule 25.10.2016