javascript - 在 d3 中的树的链接中插入文本

Question

var treeData = [
  {
    "name": "glucose_tol",
    "directions": ">",
    "thresholds": "126",
    "exits": 0.0,
    "children": [
      {
        "name": "age",
        "directions": ">",
        "thresholds": "29",
        "exits": 1.0,
        "children": [
          {
            "name": true
          },
          {
            "name": "mass_index",
            "directions": ">",
            "thresholds": "29.7",
            "exits": 0.5,
            "children": [
              {
                "name": true
              },
              {
                "name": false
              }
            ]
          }
        ]
      },
      {
        "name": false
      }
    ]
  },
];


// ************** Generate the tree diagram  *****************
var margin = {top: 20, right: 120, bottom: 20, left: 120},
 width = 960 - margin.right - margin.left,
 height = 500 - margin.top - margin.bottom;

var i = 0;

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

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

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

root = treeData[0];

update(root);

function update(source) {

  // Compute the new tree layout.
  var nodes = tree.nodes(root).reverse(),
   links = tree.links(nodes);

  // Normalize for fixed-depth.
  nodes.forEach(function(d) { d.y = d.depth * 120; });

  // Declare the nodes…
  var node = svg.selectAll("g.node")
   .data(nodes, function(d) { return d.id || (d.id = ++i); });

  // Enter the nodes.
  var nodeEnter = node.enter().append("g")
   .attr("class", "node")
   .attr("transform", function(d) { 
    return "translate(" + d.x + "," + d.y + ")"; });

  nodeEnter.append("circle")
   .attr("r", 10)
   .style("fill", "#fff");

  nodeEnter.append("text")
   .attr("x", function(d) { 
    return d.children || d._children ? -13 : 13; })
   .attr("dy", ".35em")
   .attr("text-anchor", function(d) { 
    return d.children || d._children ? "end" : "start"; })
   .text(function(d) { return d.name; })
   .style("fill-opacity", 1);

  // Declare the links…
  var link = svg.selectAll("path.link")
   .data(links, function(d) { return d.target.id; });

  // Enter the links.
  link.enter().insert("path", "g")
   .attr("class", "link")
   .attr("d", diagonal);

   // Add threshold and directions
link.enter().insert("text")
    .attr("font-family", "Arial, Helvetica, sans-serif")
    .attr("fill", "Black")
    .style("font", "normal 12px Arial")
    .attr("transform", function(d) {
        return "translate(" +
            ((d.source.x + d.target.x)/2) + "," +
            ((d.source.y + d.target.y)/2) + ")";
    })
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .text(function(d) {
        //check whether thresholds is not undefined && that target.thresholds is not undefined as it will print on both sides
        if (d.source.thresholds !== undefined)
        if(d.target.thresholds !== undefined)
        return d.source.thresholds + ' ' + d.source.directions;
    })

}

 .node circle {
   fill: #fff;
   stroke: steelblue;
   stroke-width: 3px;
 }

 .node text { font: 12px sans-serif; }

 .link {
   fill: none;
   stroke: #ccc;
   stroke-width: 2px;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

我在树的链接中间添加文本时遇到问题，因为树的最后一层没有给我任何文本。这是我必须在链接中添加文本的代码:

   // Add threshold and directions
link.enter().insert("text")
    .attr("font-family", "Arial, Helvetica, sans-serif")
    .attr("fill", "Black")
    .style("font", "normal 12px Arial")
    .attr("transform", function(d) {
        return "translate(" +
            ((d.source.x + d.target.x)/2) + "," +
            ((d.source.y + d.target.y)/2) + ")";
    })
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .text(function(d) {
        //check whether thresholds is not undefined && that target.thresholds is not undefined as it will print on both sides
        if (d.source.thresholds !== undefined)
            if(d.target.thresholds !== undefined)
        return d.source.thresholds + ' ' + d.source.directions;
    })

如果我评论这两行:if (d.source.thresholds !== undefined) 和 if(d.target.thresholds !== undefined) 那么我在所有链接上都看到了文字，但在两边都看到了，这是我不想要的。如何仅在一侧和最后一层获取文本。

Answer 1

首先你要有办法知道当前节点是在最后一层，还是在它下面还有更多层。为此，我们将实现一个 maxDepth 变量，该变量将存储所有节点的 depth 属性的最大值。这是在 update(root) 函数中完成的:

  // Normalize for fixed-depth.
  var maxDepth = 0;
  nodes.forEach(function(d) { d.y = d.depth * 120; maxDepth = (d.depth>maxDepth)?d.depth:maxDepth;});

接下来我们向第二个 if 语句添加两个额外的检查，如下所示:

if(d.target.thresholds !== undefined || d.target.name === true && d.target.depth == maxDepth)

它将确保将文本添加到 true 节点 only 最后一层。

var treeData = [
  {
    "name": "glucose_tol",
    "directions": ">",
    "thresholds": "126",
    "exits": 0.0,
    "children": [
      {
        "name": "age",
        "directions": ">",
        "thresholds": "29",
        "exits": 1.0,
        "children": [
          {
            "name": true
          },
          {
            "name": "mass_index",
            "directions": ">",
            "thresholds": "29.7",
            "exits": 0.5,
            "children": [
              {
                "name": true
              },
              {
                "name": false
              }
            ]
          }
        ]
      },
      {
        "name": false
      }
    ]
  },
];


// ************** Generate the tree diagram  *****************
var margin = {top: 20, right: 120, bottom: 20, left: 120},
 width = 960 - margin.right - margin.left,
 height = 500 - margin.top - margin.bottom;

var i = 0;

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

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

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

root = treeData[0];

update(root);

function update(source) {

  // Compute the new tree layout.
  var nodes = tree.nodes(root).reverse(),
   links = tree.links(nodes);

  // Normalize for fixed-depth.
  var maxDepth = 0;
  nodes.forEach(function(d) { d.y = d.depth * 120; maxDepth = (d.depth>maxDepth)?d.depth:maxDepth;});

  // Declare the nodes.
  var node = svg.selectAll("g.node")
   .data(nodes, function(d) { return d.id || (d.id = ++i); });

  // Enter the nodes.
  var nodeEnter = node.enter().append("g")
   .attr("class", "node")
   .attr("transform", function(d) { 
    return "translate(" + d.x + "," + d.y + ")"; });

  nodeEnter.append("circle")
   .attr("r", 10)
   .style("fill", "#fff");

  nodeEnter.append("text")
   .attr("x", function(d) { 
    return d.children || d._children ? -13 : 13; })
   .attr("dy", ".35em")
   .attr("text-anchor", function(d) { 
    return d.children || d._children ? "end" : "start"; })
   .text(function(d) { return d.name; })
   .style("fill-opacity", 1);

  // Declare the links…
  var link = svg.selectAll("path.link")
   .data(links, function(d) { return d.target.id; });

  // Enter the links.
  link.enter().insert("path", "g")
   .attr("class", "link")
   .attr("d", diagonal);

   // Add threshold and directions
link.enter().insert("text")
    .attr("font-family", "Arial, Helvetica, sans-serif")
    .attr("fill", "Black")
    .style("font", "normal 12px Arial")
    .attr("transform", function(d) {
        return "translate(" +
            ((d.source.x + d.target.x)/2) + "," +
            ((d.source.y + d.target.y)/2) + ")";
    })
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .text(function(d) {
        //check whether thresholds is not undefined && that target.thresholds is not undefined as it will print on both sides
        if (d.source.thresholds !== undefined)
        if(d.target.thresholds !== undefined || d.target.name === true && d.target.depth == maxDepth)
        return d.source.thresholds + ' ' + d.source.directions;
    })

}

.node circle {
   fill: #fff;
   stroke: steelblue;
   stroke-width: 3px;
 }

 .node text { font: 12px sans-serif; }

 .link {
   fill: none;
   stroke: #ccc;
   stroke-width: 2px;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>