D3 Examples - Networks

Networks - Nodes 2

A common method of representing nodes is to simply use the label as the node.

If you do this, make sure to adjust the cursor style to "pointer" so users don't mouse over the node and see the text selection cursor. Or set pointer-events to none on the text and place a fully transparent circle beneath them.

xxxxxxxxxx
 
<html>
<head>
  <title>Nodes as labels</title>
  <meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<style>
  svg {
    height: 500px;
    width: 500px;
    border: 1px solid gray;
  }
</style>
<body>
​
<div id="viz">
  <svg>
  </svg>
</div>
</body>
  <footer>
<script>
​
d3.csv("firm.csv",function(error,data) {createNetwork(data)});
​
function createNetwork(edgelist) {
  var nodeHash = {};
  var edgeHash = {};
  var nodes = [];
  var edges = [];
​
  edgelist.forEach(function (edge) {
    if (!nodeHash[edge.source]) {
      nodeHash[edge.source] = {id: edge.source, label: edge.source};
      nodes.push(nodeHash[edge.source]);
    }
    if (!nodeHash[edge.target]) {
      nodeHash[edge.target] = {id: edge.target, label: edge.target};
      nodes.push(nodeHash[edge.target]);
    }
    if (edge.weight >= 5) {
      edges.push({source: nodeHash[edge.source], target: nodeHash[edge.target], weight: edge.weight});
    }
  });
  createForceNetwork(nodes, edges);
}
​
function createForceNetwork(nodes, edges) {
​
//create a network from an edgelist
​
  var force = d3.layout.force().nodes(nodes).links(edges)
  .size([500,500])
  .charge(-200)
  .on("tick", updateNetwork);
​
  d3.select("svg").selectAll("line")
  .data(edges)
  .enter()
  .append("line")
  .style("stroke-width", "1px")
  .style("stroke", "#996666");
​
  var nodeEnter = d3.select("svg").selectAll("g.node")
  .data(nodes)
  .enter()
  .append("g")
  .attr("class", "node")
  .call(force.drag());
​
  nodeEnter.append("text")
  .style("text-anchor", "middle")
  .attr("y", 5)
  .style("stroke-width", "4px")
  .style("stroke-opacity", 0.95)
  .style("stroke", "white")
  .text(function (d) {return d.id})
  .style("cursor", "default");
​
  nodeEnter.append("text")
  .style("text-anchor", "middle")
  .attr("y", 5)
  .text(function (d) {return d.id})
  .style("cursor", "default");
​
  force.start();
​
  function updateNetwork() {
    d3.select("svg").selectAll("line")
    .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});
​
    d3.select("svg").selectAll("g.node")
      .attr("transform", function (d) {return "translate(" + d.x + "," + d.y + ")"});
​
  }
​
​
​
}
</script>
  </footer>
​
</html>
​
    