Question

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Force Layout Example 1</title>
    <style>

.node {
    fill: #ccc;
    stroke: #fff;
    stroke-width: 2px;
}

.link {
    stroke: #777;
    stroke-width: 2px;
}
.line {
    stroke: #777;
    stroke-width: 2px;
}

    </style>
</head>
<body>
    <script src='http://d3js.org/d3.v3.min.js'></script>
    <script>

var width = 640,
    height = 480;

var nodes = [
    { "x": 200, "y": 200 },
    { "x": 500,  "y":  300 },
  { "x": 500,  "y":  100 },
  //{ "x": 650,  "y":  100 },
];

//var nodes = [
  //  { "x": 200, "y": 200 },
    //            { "x": 500,  "y":  300 },
  //{ "x": 500,  "y":  100 },
//];
//var links = [
  //  { source: 0, target: 1 },
 // { source: 1, target: 2 },
//];

var links = [
    { source: 0, target: 1 },
  { source: 0, target: 2 },
  //{ source: 1, target: 3 },
];

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

force.linkDistance(75);

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

var node = svg.selectAll('.node')
          .data(nodes)
          .enter().append('rect')
          .attr('class', 'node');

var subnode = svg.selectAll('.subnode')
                 .data(nodes)
                 .enter().append('circle')
                 .attr('class', 'subnode');

var subnode2 = svg.selectAll('.subnode2')
              .data(nodes)
              .enter().append('circle')
              .attr('class', 'subnode2');


force.on('end', function() {
   node.attr("x", function(d) { return d.x; })
       .attr("y", function(d) { return d.y; })
       .attr("width", 50)
       .attr("height", 20);
   subnode.attr('r', width/250)
          .attr('cx', function(d) { return (d.x); })
          .attr('cy', function(d) { return d.y + 10; });

  subnode2.attr('r', width/250)
          .attr('cx', function(d) { return d.x+50; })
          .attr('cy', function(d) { return d.y + 10; });

  link.attr('x1', function(d) { return d.source.x; })
      .attr('y1', function(d) { return d.source.y+ 10; })
      .attr('x2', function(d) { return d.target.x+50; })
      .attr('y2', function(d) { return d.target.y+ 10; });

});

force.start();
var line;
function mousedown() {
    var m = d3.mouse(this);
  //alert(m[0]+"---"+m[1]);
    line = svg.append("line")
        .attr('x1', m[0])
        .attr('y1', m[1])
        .attr('x2', m[0])
        .attr('y2', m[1]);

    svg.on("mousemove", mousemove);
}

function mousemove() {

    var m = d3.mouse(this);
    line.attr('x2', m[0])
        .attr('y2', m[1]);
}

function mouseup() {
    svg.on("mousemove", null);
}
    </script>
</body>
</html>

以上解决方案给出了以下结果：

问题是我不明白为什么图形是反向绘制的，而且在上面的代码中我已经注释掉了一些节点和链接，如果你取消它们然后有更多的混乱，整个节点以完全随机的顺序绘制，即增加更多的节点和链接造成更多混乱。

请参阅JSBIN： http://jsbin.com/yuyolof/edit?html

Answer 1

看看这个jsbin http://jsbin.com/himutohimu/1/edit?html,css,output （我在这里添加了太多信息只是为了更好地了解正在发生的事情）

您有两个具有相同节点数据的子节点。您将它们定位在“结束”上，如下所示：

   subnode.attr('r', width/250) // black nodes
          .attr('cx', function(d) { return d.x; })
          .attr('cy', function(d) { return d.y + 10; });

   subnode2.attr('r', width/250) // red nodes
          .attr('cx', function(d) { return d.x + 50; })
          .attr('cy', function(d) { return d.y + 10; });

我对节点进行了不同的着色，以便更好地了解其工作原理。

为了让您的线路连接到一种子节点，您需要遵循黑色节点的x和y或红色节点的x和y：

  // x1 and y1 are the starting point of the line, so in order to follow the 
  // red nodes, we need to move accordingly with +50 for x and +10 for y.
  // the same goes for x2, y2 which are the coordinates for the end of the line
  link.attr('x1', function(d) { return d.source.x + 50; })
      .attr('y1', function(d) { return d.source.y + 10; })
      .attr('x2', function(d) { return d.target.x + 50; })
      .attr('y2', function(d) { return d.target.y + 10; });

 //Or if you need your lines to follow the black nodes/ dots then x1, y1 
 // and x2,y2 need to move accordingly to your subnode's x and y, 
 // so x as it is and y plus 10
 // it is one or the other
 link.attr('x1', function(d) { return d.source.x; })
     .attr('y1', function(d) { return d.source.y + 10; })
     .attr('x2', function(d) { return d.target.x; })
     .attr('y2', function(d) { return d.target.y + 10; });

因此，您需要连接哪些节点（点），然后根据各自的x和y移动线。

希望这有帮助！

祝你好运！

编辑：如何使用更多节点：http://jsbin.com/nodaruwere/1/edit?html,output

在Force Layout图中随机绘制的节点

1 个答案: