我的链接为什么不显示？

时间：2018-03-03 16:35:56

标签： javascript d3.js d3-force-directed

下面是我用来生成强制有向图以显示以下数据的一些代码。节点，缩放和平移功能可以正常工作，但是当有链接时，我的节点之间不会显示线条。 json格式的数据：

{
    "nodes": [
        {
            "id": "100 ladrillos",
            "group": "1",
            "Tags": "[]",
            "Size": "\"1-10"
        },
        {
            "id": "3d business solutions",
            "group": "2",
            "Tags": "[]",
            "Size": "\"1-10"
        },
        {
            "id": "a\u00e3\u0090apps",
            "group": "3",
            "Tags": "[]",
            "Size": "\"1-10"
        },
        {
            "id": "adjoint inc.",
            "group": "4",
            "Tags": "[]",
            "Size": "\"1-10"
        },
        {
            "id": "airbd, inc.",
            "group": "4",
            "Tags": "[]",
            "Size": "\"1-10"
        }
    ],
 "links":[
   {
      "source":"100 ladrillos",
      "target":"3d business solutions",
      "value":20
    },
    {
       "source":"100 ladrillos",
       "target": "a\u00e3\u0090apps",
       "value":10
     },
     {
        "source":"100 ladrillos",
        "target":"adjoint inc.",
        "value":10
      },
     {
        "source":"a\u00e3\u0090apps",
        "target":"airbd, inc.",
        "value":10
      } 
   ]
}

D3视觉代码：

<!DOCTYPE html>
<meta charset = "utf-8">
<style>

.links line {
  stroke : #999;
  stroke-opacity: 0.6;
}

.nodes circle {
  stroke: black;
  stroke-width: 0px;
}

</style>
<svg width = "1000" height = "1000"></svg>
<script src = "https://d3js.org/d3.v4.min.js"></script>
<script>

//Creating somewhere to put my force directed graph

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var radius = 15;

d3.json("data.json", function(data) {
  var nodes = data.nodes
  var links = data.links

  var simulation = d3.forceSimulation()
      .nodes(nodes);

  var link_force = d3.forceLink(links)
                        .id(function(d){return d.id;});

  var charge_force = d3.forceManyBody()
      .strength(-100);

  var center_force = d3.forceCenter(width/2,height/2);

  simulation
        .force("charge_force", charge_force)
        .force("center_force", center_force)
        .force("links",link_force)
  ;

  simulation.on("tick",tickActions);

  var g = svg.append("g")
      .attr("class","everything");

  var link = g.append("g")
          .attr("class","links")
        .selectAll("line")
        .data(links)
        .enter().append("line")
          .attr("stroke-width",2)
          .style("stroke",linkColour);

  var node = g.append("g")
          .attr("class","nodes")
          .selectAll("circle")
          .data(nodes)
          .enter()
          .append("circle")
          .attr("r",radius)
          .attr("fill", circleColour);

  var drag_handler = d3.drag()
      .on("start",drag_start)
      .on("drag", drag_drag)
      .on("end",drag_end);

  drag_handler(node);

  var zoom_handler = d3.zoom()
      .on("zoom", zoom_actions);

  zoom_handler(svg);

  function circleColour(d){
    if (d.group == 0){
      return "blue";
    } else {
      return "red";
    }
    }

    function linkColour(d){
        if(d.group == "4"){
            return "green";
        } else {
            return "red";
        }
    }

  function drag_start(d){
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x
    d.fy = d.y;
  }

  function drag_drag(d){
    d.fx = d3.event.x;
    d.fy = d3.event.y;
  }

  function drag_end(d){
    if (!d3.event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
  }

  function zoom_actions(){
    g.attr("transform", d3.event.transform)

  }

  function tickActions(){
    node
      .attr("cx",function(d) { return d.x;})
      .attr("cy",function(d){ return d.y;});

    link
      .attr("x1", function(d) { return d.source.x;})
      .attr("y1", function(d) { return d.source.y;})
      .attr("x2", function(d) { return d.source.x;})
      .attr("y2", function(d) { return d.source.y;});
  }
});
</script>

请有人解释为什么链接不会显示以及如何解决此问题？ 谢谢。

1 个答案:

答案 0 :(得分：1)

您为x1和x2设置了相同的值，y1和y2的值相同：

link.attr("x1", function(d) { return d.source.x;})
    .attr("y1", function(d) { return d.source.y;})
    .attr("x2", function(d) { return d.source.x;})
    .attr("y2", function(d) { return d.source.y;});

而不是那样，它应该是：

link.attr("x1", function(d) { return d.source.x;})
    .attr("y1", function(d) { return d.source.y;})
    .attr("x2", function(d) { return d.target.x;})//'target' here
    .attr("y2", function(d) { return d.target.y;});//'target' here

以下是具有该更改的代码（以及更小的SVG）：

＆＃13;
＆＃13; 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .links line {
    stroke: #999;
    stroke-opacity: 0.6;
  }

  .nodes circle {
    stroke: black;
    stroke-width: 0px;
  }

</style>
<svg width="500" height="300"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
  //Creating somewhere to put my force directed graph

  var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

  var radius = 15;

  var data = {
    "nodes": [{
        "id": "100 ladrillos",
        "group": "1",
        "Tags": "[]",
        "Size": "\"1-10"
      },
      {
        "id": "3d business solutions",
        "group": "2",
        "Tags": "[]",
        "Size": "\"1-10"
      },
      {
        "id": "a\u00e3\u0090apps",
        "group": "3",
        "Tags": "[]",
        "Size": "\"1-10"
      },
      {
        "id": "adjoint inc.",
        "group": "4",
        "Tags": "[]",
        "Size": "\"1-10"
      },
      {
        "id": "airbd, inc.",
        "group": "4",
        "Tags": "[]",
        "Size": "\"1-10"
      }
    ],
    "links": [{
        "source": "100 ladrillos",
        "target": "3d business solutions",
        "value": 20
      },
      {
        "source": "100 ladrillos",
        "target": "a\u00e3\u0090apps",
        "value": 10
      },
      {
        "source": "100 ladrillos",
        "target": "adjoint inc.",
        "value": 10
      },
      {
        "source": "a\u00e3\u0090apps",
        "target": "airbd, inc.",
        "value": 10
      }
    ]
  };

  var nodes = data.nodes
  var links = data.links

  var simulation = d3.forceSimulation()
    .nodes(nodes);

  var link_force = d3.forceLink(links)
    .id(function(d) {
      return d.id;
    });

  var charge_force = d3.forceManyBody()
    .strength(-100);

  var center_force = d3.forceCenter(width / 2, height / 2);

  simulation
    .force("charge_force", charge_force)
    .force("center_force", center_force)
    .force("links", link_force);

  simulation.on("tick", tickActions);

  var g = svg.append("g")
    .attr("class", "everything");

  var link = g.append("g")
    .attr("class", "links")
    .selectAll("line")
    .data(links)
    .enter().append("line")
    .attr("stroke-width", 2)
    .style("stroke", linkColour);

  var node = g.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(nodes)
    .enter()
    .append("circle")
    .attr("r", radius)
    .attr("fill", circleColour);

  var drag_handler = d3.drag()
    .on("start", drag_start)
    .on("drag", drag_drag)
    .on("end", drag_end);

  drag_handler(node);

  var zoom_handler = d3.zoom()
    .on("zoom", zoom_actions);

  zoom_handler(svg);

  function circleColour(d) {
    if (d.group == 0) {
      return "blue";
    } else {
      return "red";
    }
  }

  function linkColour(d) {
    if (d.group == "4") {
      return "green";
    } else {
      return "red";
    }
  }

  function drag_start(d) {
    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x
    d.fy = d.y;
  }

  function drag_drag(d) {
    d.fx = d3.event.x;
    d.fy = d3.event.y;
  }

  function drag_end(d) {
    if (!d3.event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
  }

  function zoom_actions() {
    g.attr("transform", d3.event.transform)

  }

  function tickActions() {
    node
      .attr("cx", function(d) {
        return d.x;
      })
      .attr("cy", function(d) {
        return d.y;
      });

    link
      .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;
      });
  }

</script>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题