Настройка ссылок в макете 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. Поэтому, когда вы делаете .data(data.links) на своем var links = ..., вы передаете атрибут undefined.

Попробуйте это:

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