在d3部队布局中设置链接

Setting up links in d3 force layout

本文关键字:设置 链接 布局 d3      更新时间:2023-09-26

我正在尝试使用节点和链接设置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>

主要问题在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

还有更多:)

此处的工作代码

希望这能有所帮助!

我认为问题是data.links不存在,您拥有的是data[#].links。因此,当您在var links = ...上执行.data(data.links)时,您将在那里传递一个undefined属性。

试试这个:

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