Question

我修改了悲惨世界代码以实现我想要做的事情。我想要一个图表，其中有一个根节点，然后只有一个级别的节点连接到该节点。

原样，如果不尝试使根节点居中，它可以工作，但是我的文本标签正在生成错误。根节点默认位于屏幕的最左上角。子节点链接并浮动到屏幕中间。

我试图根据整数变量设置链接距离，
但这似乎不起作用。
节点的文本标签未显示（在错误日志中生成cx = NaN cy = NaN等..错误）
如何在没有其他所有内容破坏或消失的情况下使root / source = 0节点居中？

我有代码（减去json阅读问题）。如果有人有提示，请告诉我。感谢。

    <!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
  cursor: move;
  stroke: #fff;
  stroke-width: 1.5px;
}
.node.fixed {
    fill: #f00;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}

</style>

<head>
    <title>test</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>

</head>

<body>
<script type="text/javascript">


//Size of region to render on
var width = 960,
    height = 500;


//D3 force directed layout
//Try playing with the charge and link distance
var force = d3.layout.force()
    .charge(-100)
    //.linkDistance(40)
    .linkDistance(function(d) { return Math.sqrt(d.distance);})
    //.on("tick", tick) //event ADDED
    .size([width, height]);

//Add our canvas
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);


//Select the miserables data ;)
d3.json("nodes.json", function(error, graph) {
  force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();

//Add the links
  var link = svg.selectAll(".link")
      .data(graph.links)
      .enter().append("line")
      .attr("class", "link")
      //.style("stroke-width", function(d) { return Math.sqrt(d.value); });
        .style("stroke-width", 2);

//Add the nodes
  var node = svg.selectAll(".node")
      .data(graph.nodes)
      .enter().append("circle")
      .attr("class", "node")
      .attr("r", 10)
      .call(force.drag)
        .style("stroke-width", 4)
        .style("stroke", function(d) { if (d.M==1) {return d3.rgb(203,24,29)}
               else  {return d3.rgb(0,109,44)};})
        .style("fill", d3.rgb(246,232,195)); //});



 //add labels
  var labels = svg.selectAll("text")
        .data(graph.nodes)
        .enter()
        .append("text")
        .attr({"x":function(d){return d.x;},
              "y":function(d){return d.y;}})

        .text(function(d) {
              if (d.name.length > 6) {return d.name.substring(0,6)+'...'}
              else    { return null } ;})
        .call(force.drag);


//Update stuff for animation:
//   This takes the physics simulation for the force directed graph and
//   sets the location of the nodes and edges to the new positions

force.on("tick", function(e) {

// soft-center the root node
         // soft-center the root node
//         var k = .01;
//         var nodes = force.nodes();
//         nodes[0].y += (height/2 - nodes[0].y) * k;
//         nodes[0].x += (width/2 - nodes[0].x) * k;
//nodes[0].fixed=true;
//           
    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; });

    node.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });

    labels.attr("x", function(d) { return d.x; })        // **NEW**
           .attr("y", function(d) { return d.y; });



  });

});

</script>

nodes.Json

{
  "nodes":[

 {"name": "XXX.XXXX", "distance": 0, "M":0},
 {"name": "1", "distance": 0.2,  "M":0}, // I had .2, which did not read in, but adding a 0, & it works
 {"name": "2", "distance": 1.8,"M":0},
 {"name": "3", "distance": 4.5, "M":0},
 {"name": "4", "distance": 2.5,  "M":0},
 {"name": "5", "distance": 1,  "M":0},
 {"name": "6", "distance": 7,  "M":0},
 {"name": "7", "distance": 1,  "M":0},
 {"name": "8", "distance": 3,  "M":1},
 {"name": "9", "distance": 10,  "M":1},
 {"name": "10", "distance": 20,  "M":1},
 {"name": "11", "distance": 3,  "M":1},
 {"name": "12", "distance": 25,  "M":1},
 {"name": "13", "distance": 35,  "M":1}
],
"links":[

          {
          "source": 0,
          "target": 0
          },
          {
          "source": 0,
          "target": 1
          },
          {
          "source": 0,
          "target": 2
          },
          {
          "source": 0,
          "target": 3
          },
          {
          "source": 0,
          "target": 4
          },
          {
          "source": 0,
          "target": 5
          },
          {
          "source": 0,
          "target": 6
          },
          {
          "source": 0,
          "target": 7
          },
          {
          "source": 0,
          "target": 8
          },
          {
          "source": 0,
          "target": 9
          },
          {
          "source": 0,
          "target": 10
          },
          {
          "source": 0,
          "target": 11
          },
          {
          "source": 0,
          "target": 12
          },
          {
          "source": 0,
          "target": 13
          }
]
}

d3.js图形布局（强制）居中根节点

0 个答案: