Javascript D3带矩形和文本换行的水平树布局

多年来一直在努力创建一个带有矩形而不是圆形的水平树布局，并将文本包装在这些矩形中。我所做的一切似乎都不起作用，我已经尝试过了，但无论是谁做的，都遗漏了一个关键步骤，即在行前定义变量

d

if（d.name.length>26）

停止整个脚本运行

我还尝试使用d3plus.js from将文本包装在

rect

标记中，但实际上它一半的时间都不起作用，似乎需要一个类似于

单击

功能的触发器才能起作用。还考虑将其用作文本包装的指南

在我的研究中，我没有发现有人将水平、矩形和包装文本组合在一个图表中。 另外，我是一个有点D3Noob的，所以所有的帮助是感激的

这是一本书

以下是我正在使用的当前代码，该代码不起作用：

    var w = 960,
    h = 2000,
    i = 0,
    duration = 500,
    root;

    var tree = d3.layout.tree()
        .size([h, w - 160]);

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

    var vis = d3.select("#container").append("svg:svg")
        .attr("width", w)
        .attr("height", h)
      .append("svg:g")
        .attr("transform", "translate(40,0)");

    root = treeData[0];
    root.x0 = h / 2;
    root.y0 = 0;
    update(root);
    function update(source) {

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

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

        var nodeEnter = node.enter().append("svg:g")
            .attr("class", "node")
            .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; });


        // Enter any new nodes at the parent's previous position.

        nodeEnter.append("svg:rect")
          .attr("width", 150)
          .attr("height", function(d) { return (d.name.length > 30) ? 38 : 19;})
          .attr("y",-11)
          .attr("rx",2)
          .attr("ry",2)
          .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; })
          .on("click", click);


            if (d.name.length > 26) {

                nodeEnter.append("svg:text")
                    .attr("x", function(d) { return d._children ? -8 : 8; })
                    .attr("y", 3)
                    .text(function(d) { return d.name; });

            } else {
                nodeEnter.append("svg:text")
                .attr("x", function(d) { return d._children ? -8 : 8; })
                .attr("y", 3)
              .append("svg:tspan")
                .text(function(d) { return d.name.slice(0,26); })
              .append("svg:tspan")
                .attr("x", function(d) { return d._children ? -8 : 8; })
                .attr("y",15)
                .text(function(d) { return d.name.slice(26); });

            }
        }
        // Transition nodes to their new position.
        nodeEnter.transition()
            .duration(duration)
            .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
            .style("opacity", 1)
         .select("rect")

            .style("fill", "lightsteelblue");

        node.transition()
          .duration(duration)
          .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
          .style("opacity", 1);


        node.exit().transition()
          .duration(duration)
          .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
          .style("opacity", 1e-6)
          .remove();

        // Update the links…
        var link = vis.selectAll("path.link")
            .data(tree.links(nodes), function(d) { return d.target.id; });

        // Enter any new links at the parent's previous position.
        link.enter().insert("svg:path", "g")
            .attr("class", "link")
            .attr("d", function(d) {
                var o = {x: source.x0, y: source.y0};
                return diagonal({source: o, target: o});
            })
          .transition()
            .duration(duration)
            .attr("d", diagonal);

        // Transition links to their new position.
        link.transition()
            .duration(duration)
            .attr("d", diagonal);

        // Transition exiting nodes to the parent's new position.
        link.exit().transition()
            .duration(duration)
            .attr("d", function(d) {
                var o = {x: source.x, y: source.y};
                return diagonal({source: o, target: o});
            })
            .remove();

        // Stash the old positions for transition.
        nodes.forEach(function(d) {
            d.x0 = d.x;
            d.y0 = d.y;
        });
    }

    // Toggle children on click.
    function click(d) {
        if (d.children) {
            d._children = d.children;
            d.children = null;
        } else {
            d.children = d._children;
            d._children = null;
        }
        update(d);
    }

    d3.select(self.frameElement).style("height", "2000px");

以及我的json：

    var treeData = [
  {
      "name": "Do trainees require direction as to what to do or how to do the task (either before they start or while they are completing it?",
      "children": [
        {
            "name": "Can they satisfactorily complete the task assigned to them?",
            "children": [
              {
                  "name": "Rating level 4",
                  "parent": "A",
              },
              {
                  "name": "How many problems / queries are there that still need to be addressed / resolved to be able to satisfactorily complete the task?",
                  "children": [
              {
                  "name": "Are problems / queries fundamental to the completion of the task at hand?",
                  "children": [
              {
                  "name": "Rating level 4",
              },
              {
                  "name": "Can the problems be resolved by the trainee (after receiving guidance)?",
                  "children": [
              {
                  "name": "Rating level 3",
              },
              {
                  "name": "Can the problems be resolved by the trainee (after receiving guidance)?",
                  "children": [
              {
                  "name": "Rating level 2",
              },
              {
                  "name": "Rating level 1",
              }
                  ]
              }
                  ]
              }
                  ]
              },
              {
                  "name": "Are problems / queries fundamental to the completion of the task at hand?",
              }
                  ]
              }
            ]
        },
        {
            "name": "Can they satisfactorily complete the task assigned to them?",
            "children": [
              {
                  "name": "Rating 1",
              },
              {
                  "name": "Rating 2",
              },
              {
                  "name": "Rating 3",
              },
            {
                "name": "Rating 4",
            }
            ]
        }
      ]
  }];

---

您的代码在此行抛出错误：

if (d.name.length > 26) {

未定义

d

。当

d3

代码引用d时，它通常在数据绑定的范围内。在代码中的这个位置，您没有循环绑定，例如：

nodeEnter.append("text")
    .attr("x", function(d) {
      return d._children ? -8 : 8;
    })
    .attr("y", 3)
    .attr("dy", "0em")
    .text(function(d) {
      return d.name; // d is defined from the binding
    });

也就是说，我喜欢链接到的

wrap

函数。因此，像上面那样添加

文本

，然后包装文本：

wrap(d3.selectAll('text'),150);

下面是对包裹的快速修改，可以调整矩形的大小：

function wrap(text, width) {
  text.each(function() {
    var text = d3.select(this),
      words = text.text().split(/\s+/).reverse(),
      word,
      line = [],
      lineNumber = 0,
      lineHeight = 1.1, // ems
      y = text.attr("y"),
      dy = parseFloat(text.attr("dy")),
      tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
      }
    }
    // find corresponding rect and reszie
    d3.select(this.parentNode.children[0]).attr('height', 19 * (lineNumber+1));

  });
}

---

示例。

你可能救了我的命，我很快就要试试。这很有效！有没有一种方法可以缩短初始路径（从原点开始），这样它们就不会延伸那么远，就像这样