Question

我是d3.js的新手。我尝试创建一个具有5个节点的静态体系结构，并根据首选项将它们彼此链接，这些节点的组织应像这样：

首先，我设置节点的位置，然后创建链接。但是，当节点被链接时，架构发生了变化，结果如下所示：

这是我的代码：

    var width = 640,
        height = 400;


    var nodes = [
              { x:   60, y: 0, id: 0},
              { x:   150, y: height/4, id: 1},
              { x:   220, y: height/4, id: 2},
              { x:   340, y: height/4, id: 3},
              { x:   420, y: height/2, id: 4},
              { x:   480, y: height/2, id: 5}
    ];

    var links = [
              { source: 1, target: 5 },
              { source: 0, target: 5 },
              { source: 2, target: 1 },
              { source: 3, target: 2 },
              { source: 4, target: 5 }
    ];

    var graph = d3.select('#graph');

    var svg = graph.append('svg')
                   .attr('width', width)
                   .attr('height', height);

    var force = d3.layout.force()
                        .size([width, height])
                        .nodes(nodes)
                        .links(links);

    force.linkDistance(width/2);

    var link = svg.selectAll('.link')
                  .data(links)
                  .enter().append('line')
                  .attr('class', 'link');

     var div = d3.select("body").append("div")
                 .attr("class", "tooltip")
                 .style("opacity", 1e-6);

      var node = svg.selectAll('.node')
              .data(nodes)
              .enter().append("circle")
              .attr("cx", d=> d.x)
              .attr("cy", d=> d.y)
              .attr('class', 'node')
              .on("mouseover", function(d){ 
                              d3.select(this)
                                  .transition()
                                  .duration(500)
                                  .style("cursor", "pointer")
                                  div
                                    .transition()  
                                    .duration(300)
                                    .style("opacity", "1")                           
                                    .style("display", "block")  
                                    console.log("label", d.label);
                                  div
                                    .html("IP: " +  d.label + " x: " + d.x + " y: " + d.y)
                                    .style("left", (d3.event.pageX ) + "px")
                                    .style("top", (d3.event.pageY) + "px");

                                })
              .on("mouseout", mouseout);


       function mouseout() {
          div.transition()
             .duration(300)
             .style("opacity", "0")
        }

       console.log("wait...");
       force.on('end', function() {

             node.attr('r', width/25)
                 .attr('cx', function(d) { return d.x; })
                 .attr('cy', function(d) { return d.y; });

             link.attr('x1', function(d) { console.log("LINE x1-> ", d.source.x); return d.source.x; })
                 .attr('y1', function(d) { console.log("LINE y1-> ", d.source.y); return d.source.y; })
                 .attr('x2', function(d) { console.log("LINE x2-> ", d.source.x); return d.target.x; })
                 .attr('y2', function(d) { console.log("LINE y2-> ", d.source.y); return d.target.y; })
                 .attr("stroke-width", 2)
                 .attr("stroke","black");
       });

       force.start();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="graph"></div>

能帮我吗？先感谢您。

Answer 1

部队布局具有一些优势，这些优势源于其自组织布局的性质：

它会自动放置节点和链接，从而避免手动定位潜在的数千个元素
它根据分配的力将节点和链接组织到理想的间距和布局

您已经为节点分配了位置，上面列出的两个优点不适用。您已经手动完成了第一项，第二项将打扰并覆盖您手动设置的位置。

我们可以fix the node positions，但是如果我们对所有节点都这样做，则会破坏力布局的目的：通过模拟力来定位节点。

相反，如果您拥有所有节点的位置，则可以跳过力，仅根据数据附加所有内容。下面的代码段首先使用d.source / d.target中包含的索引将链接放置在链接之后（因此它们位于节点之后），以访问nodes数组中的特定节点并获取适当的x或y坐标。节点位置正常。

您似乎已经调整了代码，以便在问题中使用圆圈，尽管屏幕截图使用的是图像（正如您在上一个问题中所使用的一样），我将在此处使用圆圈。根据坐标，您给出了一些重叠的线。我修改了第一个节点，以使y的值不为0（这将使svg偏离圆的一半）

var width = 640,
    height = 400;
    
var nodes = [
          { x:   60, y: height/8, id: 0},
          { x:   150, y: height/4, id: 1},
          { x:   220, y: height/4, id: 2},
          { x:   340, y: height/4, id: 3},
          { x:   420, y: height/2, id: 4},
          { x:   480, y: height/2, id: 5}
];

var links = [
          { source: 1, target: 5 },
          { source: 0, target: 5 },
          { source: 2, target: 1 },
          { source: 3, target: 2 },
          { source: 4, target: 5 }
];

var graph = d3.select('#graph');

var svg = graph.append('svg')
               .attr('width', width)
               .attr('height', height);
       
// append links:
svg.selectAll()
  .data(links)
  .enter()
  .append("line")
  .attr("x1", function(d) { return nodes[d.source].x; })
  .attr("y1", function(d) { return nodes[d.source].y; })
  .attr("x2", function(d) { return nodes[d.target].x; })
  .attr("y2", function(d) { return nodes[d.target].y; })
  .attr("stroke-width", 2)
  .attr("stroke","black");
  
// append nodes:
svg.selectAll()
  .data(nodes)
  .enter()
  .append("circle")
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })
  .attr("r", 8);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="graph"></div>

链接时节点的位置发生变化（使用d3.js）

1 个答案: