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

问题描述 投票:0回答:1

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),那么我会在所有链接上看到文本,但在两边都可以看到,这是我不想要的。我如何只在一侧获得文本,也要在最后一级获得文本。

javascript d3.js
1个回答
0
投票

如果我们在第二个if语句中添加其他检查,如下所示:

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

它将文本添加到每个true节点。

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 || d.target.name === true)
        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>
© www.soinside.com 2019 - 2024. All rights reserved.