javascript - Why does my d3 force-directed graph not display edges?

I created a simple force-directed graph using d3:

Why are the edges of the graph not showing? Here is my entire HTML file. You could also see it and tinker with it by going to view source on my linked page of course. It is based on the example from the d3 website.

<!DOCTYPE html>
<html>
  <head>
    <title>Force-Directed Layout</title>
    <script type="text/javascript" src="d3.v2.js"></script>
    <style type="text/css">

div.node {
  border-radius: 6px;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  position: absolute;
}

div.link {
  position: absolute;
  border-bottom: solid #999 1px;
  height: 0;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
}

    </style>
  </head>
  <body>
  <div id="chart"></div>
    <script type="text/javascript">

var width = 960,
    height = 500;

var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);

var svg = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("newJson.json", function(json) {
  force
      .nodes(json.nodes)
      .links(json.links)
      .start();

  var link = svg.selectAll("line.link")
      .data(json.links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });

  var node = svg.selectAll("circle.node")
      .data(json.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", 5)
      .style("fill", function(d) { return color(d.group); })
      .call(force.drag);

  node.append("title")
      .text(function(d) { return d.name; });

  force.on("tick", function() {
    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; });

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

    </script>
  </body>
</html>

Shouldn't var link... display the edges? My JSON file is also pretty simple:

{"nodes":
   [{"name":"Myriel","group":1},
    {"name":"Napoleon","group":1},
    {"name":"Napoleon","group":2}],
 "links":
    [{"source":1,"target":0,"value":1},
     {"source":1,"target":0,"value":1},
     {"source":1, "target":2, "value":1}]}

I created a simple force-directed graph using d3: http://goo.gl/afHTD

<!DOCTYPE html>
<html>
  <head>
    <title>Force-Directed Layout</title>
    <script type="text/javascript" src="d3.v2.js"></script>
    <style type="text/css">

div.node {
  border-radius: 6px;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  position: absolute;
}

div.link {
  position: absolute;
  border-bottom: solid #999 1px;
  height: 0;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
}

    </style>
  </head>
  <body>
  <div id="chart"></div>
    <script type="text/javascript">

var width = 960,
    height = 500;

var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);

var svg = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("newJson.json", function(json) {
  force
      .nodes(json.nodes)
      .links(json.links)
      .start();

  var link = svg.selectAll("line.link")
      .data(json.links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });

  var node = svg.selectAll("circle.node")
      .data(json.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", 5)
      .style("fill", function(d) { return color(d.group); })
      .call(force.drag);

  node.append("title")
      .text(function(d) { return d.name; });

  force.on("tick", function() {
    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; });

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

    </script>
  </body>
</html>

Shouldn't var link... display the edges? My JSON file is also pretty simple:

{"nodes":
   [{"name":"Myriel","group":1},
    {"name":"Napoleon","group":1},
    {"name":"Napoleon","group":2}],
 "links":
    [{"source":1,"target":0,"value":1},
     {"source":1,"target":0,"value":1},
     {"source":1, "target":2, "value":1}]}

Share Improve this question edited Jun 16, 2014 at 9:11 VividD 10.5k8 gold badges66 silver badges112 bronze badges asked Apr 9, 2012 at 22:24 dangerChihuahua007 21k38 gold badges128 silver badges211 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 7

You need to apply a stroke style via CSS. Your current node and link styles are restricted to HTML DIV elements, while the nodes and links are actually represented as SVG circle and line elements, respectively. Try this:

.node {
  fill: #000;
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #aaa;
  stroke-width: 1.5px;
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Why does my d3 force-directed graph not display edges? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)