具有矩形和文本环绕的 D3 水平树布局

Question

多年来一直在努力创建一个用矩形而不是圆形的水平树布局，并让文本在这些矩形内环绕。我所做的一切似乎都没有用，我已经尝试过 this code 但不管是谁做的，都遗漏了关键的一步，即在该行之前定义变量 d if (d.name.length > 26) 从运行.

停止整个脚本

我也一直在尝试使用 http://d3plus.org/ in order to wrap text inside rect tags but it actually doesn't work half the time and seems to need a trigger like a click function in order to work. Also considering using this example 中的 d3plus.js 作为文本环绕的指南。

在我的研究中，我没有发现有人在一个图表中完成了水平、矩形和环绕文本的组合。另外，我有点 d3 菜鸟，所以感谢所有帮助。

这里是JSFiddle.

这是我正在使用的当前代码，但它不起作用：

    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",
            }
            ]
        }
      ]
  }];

Answer 1

您的代码在这一行抛出错误：

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
    });

就是说，我喜欢您 link 的 wrap 功能。所以像上面一样添加你的 text 然后包装文本：

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

这里有一个快速修改的 wrap，它也会调整你的 rects 的大小：

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

  });
}

例子here.

具有矩形和文本环绕的 D3 水平树布局

D3 horizontal tree layout with rect and text wrapping

html

javascript

jquery

svg

d3.js