How to code a simple d3.js network graph using DIVs as nodes

问题

I have a hard time understanding how D3 works. I'd just like to get a simple network graph (without animation nor “force” effects) using plain DIVs (containing formatted text) as nodes. No SVG is to be used for nodes.

The DIVs would be, for instance:

<div id="div1">One</div>
<div id="div2"><b>Two</b></div>
<div id="div3"><span style="color: red;">Three</span></div>
<div id="div4"><p class="someclass">Four</p></div>

The links between DIVs/nodes would be something like this (which is probably pseudo-JSON):

{
    "myDIVs":[
        {"name":"div1"},
        {"name":"div2"},
        {"name":"div3"},
        {"name":"div4"}
    ],
    "myLinks":[
        {"source":1,"target":2},
        {"source":1,"target":3},
        {"source":2,"target":1},
        {"source":4,"target":3}
    ]
}

What would be the right D3 code?

回答1:

Yes, it is possible to mix pre-build divs with d3's force layout and then SVG lines. You would need to absolutely position the divs. Here's a quick example, using your HTML and data structure. Note, I changed your links to 0 based array indexes:

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    .node {
      fill: #ccc;
      stroke: #fff;
      stroke-width: 2px;
    }
    
    .link {
      stroke: #777;
      stroke-width: 2px;
    }
  </style>
</head>

<body>

  <div id="div1">One</div>
  <div id="div2"><b>Two</b></div>
  <div id="div3"><span style="color: red;">Three</span></div>
  <div id="div4">
    <p class="someclass">Four</p>
  </div>

  <script src='http://d3js.org/d3.v3.min.js'></script>
  <script>
    var width = 400,
      height = 400;

    var data = {
      "myDIVs": [{
        "name": "div1"
      }, {
        "name": "div2"
      }, {
        "name": "div3"
      }, {
        "name": "div4"
      }],
      "myLinks": [{
        "source": 0,
        "target": 1
      }, {
        "source": 0,
        "target": 2
      }, {
        "source": 1,
        "target": 0
      }, {
        "source": 3,
        "target": 2
      }]
    };

    var nodes = data.myDIVs,
      links = data.myLinks;

    var svg = d3.select('body').append('svg')
      .attr('width', width)
      .attr('height', height);

    var force = d3.layout.force()
      .size([width, height])
      .nodes(nodes)
      .links(links)
      .linkDistance(250)
      .charge(-50);

    var link = svg.selectAll('.link')
      .data(links)
      .enter().append('line')
      .attr('class', 'link');

    var node = d3.selectAll('div')
      .data(nodes)
      .each(function(d) {
        var self = d3.select('#' + d.name);
        self.style("position", "absolute");
      });

    force.on('end', function() {
      node
        .style('left', function(d) {
          return d.x + "px";
        })
        .style('top', function(d) {
          return d.y + "px";
        });

      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;
        });
    });
    
    force.start();
    for (var i = 0; i < 100; ++i) force.tick();
    force.stop();
  </script>
</body>

</html>

来源：https://stackoverflow.com/questions/36100152/how-to-code-a-simple-d3-js-network-graph-using-divs-as-nodes

标签

javascript

html

css

d3.js

graph