在d3强制布局中设置链接

I am trying to set up a d3 force visualization with nodes and links. I have my nodes displaying properly but am having some trouble with links. Could someone take a look at my json file and then my code and guide me through the process of getting the links to display?

我正在尝试使用节点和链接设置d3力可视化。我的节点显示正常,但链接有问题。有人可以看一下我的json文件然后查看我的代码并指导我完成获取链接的过程吗?

Here's the json data (sources and targets for links are at the bottom):

这是json数据(链接的源和目标位于底部):

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

And here's the code for the visualization:

这是可视化的代码:

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

2 个解决方案

#1

The main problem is inside your JSON links You have values like this:

主要问题是你的JSON链接里面你有这样的值:

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

But there is no Node with index 52 thus everything was breaking on load. However you code has lot of other errors like

但是没有带索引52的节点因此所有东西都在加载。但是,您的代码有很多其他错误,如

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

And many more :)

还有很多 :)

Working code here

在这里工作代码

Hope this helps!

希望这可以帮助!

#2

I believe the problem is that data.links does not exist, what you have is data[#].links. So when you do .data(data.links) on your var links = ..., you are passing an undefined attribute there.

我认为问题是data.links不存在,你有的是数据[#]。链接。所以当你在var links = ...上执行.data(data.links)时,你会在那里传递一个未定义的属性。

Try this:

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

#1