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

Question

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

我在http://jsfiddle.net/PatriciaW/Dnnve/

欢迎任何帮助。

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);

Answer 1

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

举个简单的例子，在你的小提琴中，只需将第一个连接从。。。

｛"连接"：｛"来源"："丽塔"，"目标"："弹性多伦多"｝｝

到。。。

｛"连接"：｛"源"：1，"目标"：4｝｝

1和4是节点阵列中的元素的索引。希望这就是你想要的。

Answer 2

我用工作代码更新了jsfiddle。需要改进，但体现了原则。