带有矩形和文本环绕的 D3 水平树布局 [英] D3 horizontal tree layout with rect and text wrapping

问题描述

多年来一直在努力使用矩形而不是圆形创建水平树布局，并将文本环绕在这些矩形内.我所做的一切似乎都不起作用，我已经尝试过这段代码，但无论是谁制作的，都遗漏了一个关键的步骤，在行前定义变量 dif (d.name.length > 26) 停止整个脚本运行.

Have been struggling for ages to create a horizontal tree layout with rectangles instead of circles, and have the text wrap inside those rectangles. Nothing I do seems to work, I have tried this code but whoever made it has left out a crucial step, in defining the variable d before the line if (d.name.length > 26) which stops the whole script from running.

我也一直在尝试使用 http://d3plus.org/ 中的 d3plus.js 来包装rect 标签内的文本，但它实际上有一半时间不起作用，似乎需要一个像 click 函数这样的触发器才能工作.还考虑使用此示例作为文本换行指南.

I have also been trying to use d3plus.js from 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 as a guide on text wrapping.

在我的研究中，我没有发现有人在一张图中完成了水平、矩形和环绕文本的组合.此外，我有点像 d3 菜鸟，因此感谢所有帮助.

In my research I have not found that anybody has done the combination of horizontal, rectangles and wrapped text in one diagram. Also I am a bit of a d3 noob so all help is appreciated.

这是一个 JSFiddle.

这是我正在使用的当前代码，但无法正常工作:

Here is the current code I am using which isn't working:

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

推荐答案

你的代码在这一行抛出错误:

Your code throws an error at this line:

if (d.name.length > 26) {

d 未定义.当 d3 代码引用 d 时，它通常在数据绑定的范围内.在代码的这个地方，你没有循环绑定，比如:

d isn't defined. When d3 code references d, it's usually in the scope of a data binding. At this place in the code, you are not looping a binding, like:

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 函数.所以添加你的 text 像上面一样，然后包装文本:

That said, I like the wrap function you link to. So add your text like above and then wrap the text:

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

这是对 wrap 的快速修改，它也会调整您的矩形的大小:

Here's a quick modification to the wrap that'll resize your rects as well:

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

  });
}

示例此处.

这篇关于带有矩形和文本环绕的 D3 水平树布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！