d3.js-強制布局和節點位置

Question

我在JSfiddle之后進行了分叉和修改。 這是js代碼

var graph = {
  "nodes": [{
    "name": "a",
    "group": 1
  }, {
    "name": "a",
    "group": 1
  }, {
    "name": "a",
    "group": 1
  }, {
    "name": "a",
    "group": 1
  }, {
    "name": "b",
    "group": 8
  }],
  "links": [{
    "source": 1,
    "target": 0,
    "value": 1
  }, {
    "source": 2,
    "target": 0,
    "value": 1
  }, {
    "source": 3,
    "target": 0,
    "value": 1
  }, {
    "source": 4,
    "target": 0,
    "value": 1
  }]
};
var width = 600,
  height = 600;

var color = d3.scale.category20();

var force = d3.layout.force()
  .charge(-120)
  .linkDistance(30)
  .size([width, height]);

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

var drawGraph = function(graph) {
  force
    .nodes(graph.nodes)
    .links(graph.links)
    .start();

  var link = svg.selectAll(".link")
    .data(graph.links)
    .enter().append("line")
    .attr("class", "link")
    .style("stroke-width", function(d) {
      return Math.sqrt(d.value);
    });

  var gnodes = svg.selectAll('g.gnode')
    .data(graph.nodes)
    .enter()
    .append('g')
    .classed('gnode', true)
    .call(force.drag);

  var node = gnodes.append("circle")
    .attr("class", "node")
    .attr("r", 10)
    .style("fill", function(d) {
      return color(d.group);
    });

  node.append("title")
    .text(function(d) {
      return d.name;
    });

  var labels = gnodes.append("text")
    .text(function(d) {
      return d.name;
    })
    .attr('text-anchor', 'middle')
    .attr('font-size', 12.0)
    .attr('font-weight', 'bold')
    .attr('y', 2.5)
    .attr('fill', d3.rgb(50, 50, 50))
    .attr('class', 'node-label')
    .append("svg:title")
    .text(function(d) {
      return d.name;
    });

  force.on("tick", function() {
    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;
      })
      .each(function(d) {
        console.log(Math.sqrt((d.source.x - d.target.x) * (d.source.x - d.target.x) + (d.source.y - d.target.y) * (d.source.y - d.target.y)));
      });

    gnodes.attr("transform", function(d) {
      return 'translate(' + [d.x, d.y] + ')';
    });
  });
};

drawGraph(graph);

現在這是我的問題：

（如何）在力導向算法完成渲染之后是否可以獲取和提取節點的位置？ 我需要將節點位置保存在JSON中，以便在另一個框架中使用預渲染的svg圖。 最好是基於畫布尺寸600 * 600獲得標准化的位置值

謝謝你的幫助！

Answer 1

您可以使用在所有計算完成后觸發的force end事件。 之后，您可以通過var nodes = force.nodes()獲取節點，並根據需要對其進行操作。

這里的小提琴 -打開控制台，完成所有計算后，它應該顯示帶有位置的節點。

請注意，它將在每次操作后觸發，如果需要，您應該添加一些標志以使每次都不觸發此回調。