在d3 force布局中设置链接

Question

我正在尝试使用节点和链接设置d3强制可视化。我有我的节点正确显示，但有一些链接的问题。有人可以看看我的json文件，然后看看我的代码，并引导我完成显示链接的过程吗？

这里的JSON数据（源和链接目标是在底部）：

https://api.myjson.com/bins/4t8na

下面是用于可视化代码：

<script type= "text/javascript"> 
 

 
     var w = 1000, 
 
      h = 650; 
 

 
     var svg = d3.select("body").append("svg") 
 
      .attr("height", 0) 
 
      .attr("width", 0) 
 
      .style("border", "1px solid black"); 
 

 
     var data; // a global 
 

 
     var force = d3.layout.force() 
 
      .size([w, h]) 
 
      .linkDistance([150]) 
 
      .charge([-1050]) 
 
      .gravity(0.5) 
 
      .on("tick", tick); 
 

 
     var svg = d3.select("body").append("svg") 
 
      .attr("width", w) 
 
      .attr("height", h); 
 
     
 
     var circles = svg.selectAll(".node"); 
 

 
     d3.json("https://api.myjson.com/bins/1rnhq", function(error, json) { 
 
      if (error) return console.warn(error); 
 
      data = json; 
 
      var nodes = data; 
 
      console.log(data); 
 

 
     force.nodes(data)//.links() 
 
      .start(); 
 

 
// Update nodes. 
 
    
 
    circles = circles.data(data); 
 

 
    circles.exit().remove(); 
 

 
    var nodeEnter = circles.enter().append("g") 
 
     .attr("class", "node") 
 
     .style("fill", "#000") 
 
     .style("opacity", 0.75) 
 
     .on("mouseover", mouseover) 
 
     .on("mouseout", mouseout) 
 
     .on("click", click)  
 
     .call(force.drag); 
 

 
    nodeEnter.append("circle") 
 
      .attr("r", function(d) { return d.sector == "Academia" ? 1:5 }); 
 
      
 
    nodeEnter.attr("cursor", "pointer"); 
 
      
 
//Update links 
 
    var links = svg.selectAll(".link") 
 
     .data(data.links) 
 
     .enter().append("line") 
 
     .attr("class", "link") 
 
     .style("stroke-width", "1px"); 
 
      
 
    links.exit().remove();   
 
      
 
    function mouseover() { 
 
     d3.select(this).select("circle").transition() 
 
      .duration(250) 
 
      .attr('r', 10); 
 
    } 
 
      
 
    function mouseout() { 
 
     d3.select(this).select("circle").transition() 
 
      .duration(250) 
 
      .attr('r', 5); 
 
    } 
 

 
    nodeEnter.append("text") 
 
     .attr("text-anchor", "middle") 
 
     .style("font-size", ".75em") 
 
     .attr("dy", "-0.85em").text(function (d) { return d.name });     
 
    
 
    var tooltip = svg.append("rect") 
 
      .attr("x", 1000) 
 
      .attr("y", 0) 
 
      .attr("width", 900) 
 
      .attr("height", 700) 
 
      .attr("opacity", 0.85);    
 

 
      
 
    function click() { 
 
     d3.select(tooltip).transition() 
 
      .duration(450) 
 
      .attr("x", 650) 
 
    };    
 

 
    }); 
 

 
function tick() { 
 
    links.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; }); 
 
    circles.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 
 
}; 
 
     
 
     // create svg nodes for each json object: "sector" 
 
       
 
     // create svg nodes for each json object: "name"  
 
     
 
     // load links.json 
 
     
 
     // create svg links from links json file 
 
     
 
     // style links 
 
     
 
     // sort json objects by projects 
 
     
 
     // get google map: coastal virginia 
 
     
 
     // sort json objects: "name" by geography 
 
     
 
     // get googe map U.S. 
 
     
 
    </script>

Answer 1

的主要问题是内部 你值你这样的JSON链接：

{"source":52,"target":28},{"source":52,"target":29},{"source":52,"target":30},{"source":52,"target":31} 

但与指数52因此一切都被打破负荷没有节点。 然而，你的代码有很多其他错误像

circles.exit().remove();//this is incorrect coz circles in your case is not a selection 

还有更多:)

工作代码here

希望这有助于！

Answer 2

我相信问题是data.links不存在，你有什么是data[#].links。因此，当您在var links = ...上执行.data(data.links)时，您在那里传递undefined属性。

试试这个：

var links = svg.selectAll(".link") 
      .data(data) 
      // ...