Javascript D3.js-无法将线路添加到静态网络

我不是d3方面的专家（你们很多人都知道），但是我正在尝试修改一个工作网络，以便节点是固定的。到目前为止，我已经能够让节点工作，但还不能让它们之间的线路工作

我创造了一把小提琴

欢迎任何帮助

var width = 960,
height = 700, 
n = 100;
var categoryColour = {
"community group": "red",
"volunteer": "blue",
"organization": "green",
"air": "transparent"
};
var json2 = {"nodes":[{"node":{"name":"TCAN","x2":1,"y2":2,"description":"A network of organizations in Toronto devoted to climate change mitigation and adaptation.","category":"organization","size":3,"URL":"http:\/\/localhost:8888\/mydrupal\/groups\/tcan"}},{"node":{"name":"Rita ","x2":5,"y2":3,"description":"Rita is devoted to mitigating climate change and participates in many organizations.","category":"volunteer","size":2,"URL":"http:\/\/localhost:8888\/mydrupal\/groups\/rita"}},{"node":{"name":"Green 13","x2":5,"y2":4,"description":"Green 13","category":"community group","size":2,"URL":"http:\/\/localhost:8888\/mydrupal\/groups\/green-13"}},{"node":{"name":"ZCO","x2":3,"y2":1,"description":"Zero Carbon Ontario","category":"organization","size":2,"URL":"http:\/\/localhost:8888\/mydrupal\/groups\/zco"}},{"node":{"name":"Resilient Toronto","x2":3,"y2":5,"description":"","category":"organization","size":3,"URL":"http:\/\/localhost:8888\/mydrupal\/groups\/resilient-toronto"}},{"node":{"name":"City of Toronto","x2":3,"y2":3,"description":"","category":"organization","size":5,"URL":"http:\/\/localhost:8888\/mydrupal\/groups\/city-toronto"}}]};
  var nodes=json2.nodes.map(function(json2) {
    return json2.node;
  }); 
var i = 0;
while (i < nodes.length) {
nodes[i].fixed=true;
nodes[i].x = (nodes[i].x2)*100;
nodes[i].y = (nodes[i].y2)*100;
i = i+ 1;
}
var json = {"connections":[{"connection":{"source":"Rita","target":"Resilient Toronto"}},{"connection":{"source":"TCAN","target":"Resilient Toronto"}},{"connection":{"source":"Resilient Toronto","target":"City of Toronto"}},{"connection":{"source":"Rita","target":"ZCO"}},{"connection":{"source":"Rita","target":"Green 13"}},{"connection":{"source":"Green 13","target":"TCAN"}},{"connection":{"source":"ZCO","target":"TCAN"}}]};
   var links=json.connections.map(function(json) {
    return json.connection;
  });
var force = d3.layout.force()
.nodes(nodes)
.links(links)
.size([width, height])
.linkDistance(60)
.charge(-300)
.on("tick", tick)
.start();

svg = d3.select("#network") 
.append("svg")
.attr("width", width)
.attr("height", height);

var link = svg.selectAll(".link")
.data(force.links())
.enter().append("line")
.attr("class", "link");

var node = svg.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.call(force.drag);

node.append("circle") // this is OK if use nodes or links below but defaults to links
 .attr("r", 8)
 .style("fill", function(nodes) { 
    return categoryColour [nodes.category];
   })     

node.append("text") //  OK
.attr("x", 12)
.attr("dy", ".35em")
.text(function(d) { 
    return d.name; });

function tick() {
link
  .attr("x1", function(d) { 
// console.log("d"); console.log(d); has source and target but not .x and y values?
       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(" + d.x + "," + d.y + ")"; 
  });
};

// Use a timeout to allow the rest of the page to load first.
setTimeout(function() {

force.tick();
console.log("timeout nodes "); console.log(nodes); // 

svg.selectAll("line")
.data(links)
.enter().append("line")
.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; });

svg.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", 4.5);

}, 10);

var-width=960，
高度=700，
n=100；
变量类别颜色={
“社区组”：“红色”，
“志愿者”：“蓝色”，
“组织”：“绿色”，
“空气”：“透明”
};
var json2={“nodes”：[{“node”：{“name”：“TCAN”，“x2”：1，“y2”：2，“description”：“多伦多致力于缓解和适应气候变化的组织网络”，“category”：“organization”，“size”：3，“URL”：“http:\/\/localhost:8888\/mydrupal\/groups\/TCAN”}，{“node”：{“name”：“Rita”，“x2”：5，“y2”：3，“description”：“丽塔致力于缓解气候变化，并参与了许多组织。”，“类别”：“志愿者”，“规模”：2，“URL”：“http:\/\/localhost:8888\/mydrupal\/groups\/Rita”}，{“节点”：{“名称”：“绿色13”，“x2”：5，“y2”：4，“描述”：“绿色13”，“类别”：“社区组”，“规模”：2，“URL”：“http:\/\/localhost:8888\/mydrupal\/groups\/Green-13”}，{“节点”“：{“名称”：“ZCO”，“x2”：3，“y2”：1，“描述”：“零碳安大略省”，“类别”：“组织”，“大小”：2，“URL”：“http:\/\/localhost:8888\/mydrupal\/groups\/ZCO”}，{“节点”：{“名称”：“弹性多伦多”，“x2”：3，“y2”：5，“描述”：“类别”：“组织”，“大小”：3，“URL”：“http:\/\/\/localhost:8888\/mydrupal\/groups\/弹性多伦多”}，{“节点”：”“多伦多市”，“x2”：3，“y2”：3，“描述”：“类别”：“组织”、“大小”：5，“URL”：“http:\/\/localhost:8888\/mydrupal\/groups\/City Toronto”}}；
var nodes=json2.nodes.map（函数（json2）{
返回json2.node；
}); 
var i=0；
while（i

我也不是专家，但我认为您遇到了问题，因为连接中的源值和目标值应该引用节点的相应位置数组索引（而不是节点名称）

一个简单的例子，在你的小提琴只是改变第一个连接从

{“连接”：{“源”：“丽塔”，“目标”：“弹性多伦多”}

到

{“连接”：{“源”：1，“目标”：4}

---

1和4是节点数组中元素的索引。希望这就是您要查找的内容。

我用工作代码更新了JSFIDLE。需要改进，但演示了原理。

您需要做的就是将所有节点的

.fixed

属性设置为

true

。也许从工作开始会更容易强制布局示例？我认为这就是我添加的循环所做的。是的，没错。你已经在这样做了——你的问题似乎是关于链接的。这就是为什么我建议从一个工作示例开始（即链接所在的位置）可能更简单。这就是我所做的…但当我看到Links对象时，没有让我困惑的x和y属性。但我将按照你的建议重新开始。我能够通过将Links数组的循环嵌套到nodes数组中，并将源节点和目标节点的x，y属性复制到Links数组中，从而使链接正常工作。虽然不是特别优雅，但它确实有效。我嵌入了数组以演示问题，但在现实世界中，我从Drupal视图生成它们，该视图基于两个节点…一个用于成员，另一个用于成员之间的关系。这将很难（可能不可能）动态地做这件事，尽管我可以研究一下。谢谢。