Question

我很难理解D3的工作原理。我只想使用普通DIV（包含格式化文本）作为节点来获得一个简单的网络图（没有动画也没有“强制”效果）。没有SVG用于节点。

DIV将是，例如：

<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>

DIV /节点之间的链接会是这样的（可能是伪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}
    ]
}

什么是正确的D3代码？

Answer 1

是的，可以将预构建div与d3的力布局和SVG线混合。你需要绝对定位div。这是一个使用HTML和数据结构的简单示例。注意，我将链接更改为基于0的数组索引：

<!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>

如何使用DIV作为节点

1 个答案: