在 d3 强制布局中设置链接

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)
            // ...