Question

我不是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);

Answer 1

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

一个简单的例子，在你的小提琴中只需改变第一个连接......

{“connection”：{“source”：“Rita”，“target”：“Resilient Toronto”}}

为...

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

1和4是节点数组中元素的索引。希望这是你正在寻找的。

Answer 2

我用工作代码更新了jsfiddle。需要改进但表明原则。

D3.js - 无法向静态网络添加行

2 个答案: