Question

我正在尝试在力导向图中修复某些节点。我设法快速修复了它们，但没有设法修复它们的初始位置。尝试和观察：

我确实设置了fixed = true
我尝试使用d.x手动设置d.y和nodes.each(function(d) { if (d.group == 'some_group') {d.x = 100; d.y = 100;} })
还尝试修复d.dx，d.fx，d.cx，还尝试了d.source.x甚至nodes.attr('x', 0)
节点由translate定位，我想这与问题有关。但也不设法将transform属性设置为例如translate(40, 400)

我的部分代码如下。

// Define force layout 
var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([width, height])
    .linkDistance(70)
    .gravity(0.1)
    .charge(-500)
    .on("tick", tick)
    .start()
    //.alphaDecay(0.01)
    ;

// Create the SVG 
$('svg').remove()
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)

// Append to the SVG
svg.append("svg:defs")
    .selectAll("marker")
    .data(["end"])      // Different link/path types can be defined here
    .enter().append("svg:marker")    // This section adds in the arrows
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 5)
    .attr("markerHeight", 5)
    .attr("orient", "auto")
    .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5")
    .style("stroke", function(d) { return color(d.status); })

// define the nodes
var node = svg.selectAll(".node")
    .data(force.nodes())
    .enter().append("g")
    .attr("class", "node")
    .on("mouseover", node_mouseover)
    .on("mouseout", node_mouseout)
    .on("dblclick", node_pin)
    .call(force.drag)
    .call(force.drag)
    .each(function(d) { if (d.group == 'some_group') {d.fixed = true} })
    .each(function(d) { if (d.group == 'some_group') {d.x = 100; d.y = 100;} })
    ;

var process = 3;
function tick() {
    // Tick (time) function that is required for the force directed graph 
    if (process == 0) {
        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(" + Math.max(6, Math.min(d.x, width-6)) + "," + Math.max(6, Math.min(d.y, height-6)) + ")"; });
        process = 3
        }
    process = process - 1;
}

固定节点在d3受力图中的位置

0 个答案: