力有向图中缺少链接

Question

我正在使用修改力有向图 II作为我的图形的基础。我想我已经处理了我们处理链接格式的不同方式（博斯托克使用引用，我使用字符串），通过更改

simulation.force("link", d3.forceLink(links).distance(200))

到

simulation.force("link", d3.forceLink().id(function(d) {
    return d.id;
}))

但没有骰子。链接仍然没有被绘制。我还缺少什么？

我的 jsfiddle 在这里。

Answer 1

您在问题中发布的代码中有两个错误：

1. 在您的代码中修改链接力时，您不再提供力的链接，因为您没有links作为参数提供。它必须是d3.forceLink(links)。

2. 提供给.id()的函数是节点 ID 的访问器函数。在您的情况下，节点的 id 由其属性定义name。因此，您需要将访问器更改为.id(function(d) { return d.name; }).

将链接力的定义更改为以下内容以使其工作：

.force("link", d3.forceLink(links).id(function(d) {
  return d.name;
}))

查看以下代码片段以获取工作演示：

.force("link", d3.forceLink(links).id(function(d) {
  return d.name;
}))

nodes = [{
  name: "test",
  type: "test"
}, {
  name: "test2",
  type: "test2"
}];
links = [{
  source: "test",
  target: "test2"
}];

var width = 500,
  height = 500;

var svg = d3.select("svg"),
  color = "blue";

var simulation = d3.forceSimulation(nodes)
  .force("charge", d3.forceManyBody().strength(-1000))
  .force("link", d3.forceLink(links).id(function(d) {
    return d.name;
  }))
  .force("x", d3.forceX())
  .force("y", d3.forceY());

var g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"),
  link = g.append("g").attr("stroke", "#000").attr("stroke-width", 1.5).selectAll(".link"),
  node = g.append("g").attr("stroke", "#fff").attr("stroke-width", 1.5).selectAll(".node");

forceGraphUpdate = function() {

  node = node.data(nodes);
  node.exit().transition().attr("r", 0)
    .remove();

  node = node.enter().append("circle")
    .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended))
    .attr("fill", function(d) {
      return color;
    })
    .call(function(node) {
      node.transition().attr("r", 8)
    })
    .merge(node);

  link = link.data(links);

  link.exit().transition()
    .attr("stroke-opacity", 0)
    .attrTween("x1", function(d) {
      return function() {
        return d.source.x;
      };
    })
    .attrTween("x2", function(d) {
      return function() {
        return d.target.x;
      };
    })
    .attrTween("y1", function(d) {
      return function() {
        return d.source.y;
      };
    })
    .attrTween("y2", function(d) {
      return function() {
        return d.target.y;
      };
    })
    .remove();

  link = link.enter().append("line")
    .call(function(link) {
      link.transition().attr("stroke-opacity", 1);
    })
    .merge(link);

  simulation
      .nodes(nodes)
      .on("tick", ticked);
 
}

function ticked() {
  node.attr("cx", function(d) {
      return d.x;
    })
    .attr("cy", function(d) {
      return 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;
    });
}

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

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

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

forceGraphUpdate();

function addNode() {
  nodes.push({
    name: "test",
    type: "testing"
  });
  forceGraphUpdate();
}
addNode();