d3.js绘制树图结构节点直接连线如何实现代码实现

要用到d3.js库中的布局功能，具体来说是树状布局（tree layout）。具体的代码实现可以参考以下示例：

var margin = {top: 20, right: 120, bottom: 20, left: 120},
    width = 960 - margin.right - margin.left,
    height = 800 - margin.top - margin.bottom;

var tree = d3.layout.tree()
    .size([height, width]);

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var root = {
  "name": "A",
  "children": [
    {
      "name": "B",
      "children": [
        { "name": "C" },
        { "name": "D" }
      ]
    },
    {
      "name": "E",
      "children": [
        { "name": "F" },
        { "name": "G" }
      ]
    }
  ]
};

var nodes = tree.nodes(root),
    links = tree.links(nodes);

var link = svg.selectAll(".link")
    .data(links)
    .enter().append("path")
    .attr("class", "link")
    .attr("d", diagonal);

var node = svg.selectAll(".node")
    .data(nodes)
    .enter().append("g")
    .attr("class", "node")
    .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

node.append("circle")
    .attr("r", 4.5);

node.append("text")
    .attr("dx", function(d) { return d.children ? -8 : 8; })
    .attr("dy", 3)
    .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
    .text(function(d) { return d.name; });

这个示例其实就是一个非常简单的树状结构，但是可以看到节点和节点之间是通过直线相连接的。具体来说，需要用到d3.layout.tree()这个函数进行树状布局，再用到d3.svg.diagonal()这个函数来定义连接线的路径，最后通过d3.selectAll()以及.data()等函数将节点和线条加入进去即可。需要注意的是，在节点连接线这一部分的代码当中，attr函数中的参数d以及diagonal函数中的参数d都表示一个节点在树状结构中的位置，需要根据实际情况加以理解。