Question

在这里完成d3新手。我有这个d3树，我正在使用（这里是工作的jsfiddle https://jsfiddle.net/Joe123/vq4jpr1s/16/），我有它，以便每个节点的文本包装到节点的大小。但是，在您看到的同一节点上多次单击后，文本将恢复为打开状态，我无法弄清楚原因。有没有人有任何想法？任何帮助将不胜感激。

这是wrap函数：

    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,
      y = text.attr("y"),
      dy = parseFloat(text.attr("dy")),
      tspan = text.text(null).append("tspan").attr("x", 5).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", 5).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
      }
    }
    d3.select(this.parentNode.children[0]).attr("height", 20 * (lineNumber+1));


  });
}

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

以下是点击功能，我尝试从这里调用wrap函数但没有运气。

function click(d) {

  if (d.children) {
    d._children = d.children;
    d.children = null;

  } else {
    d.children = d._children;

  }
  update(d);
}

Answer 1

问题是，当您尝试基于空格进行拆分时，文本已经没有空间了（第二次是on-wards）。

所以不要做

m = re.match(r'^[^sL]*(?:(?:\B[sL]|s(?!ample\b)|(?<=.)L|L(?!evel =))[^sL]*)*Level = "([^"]*)"', s)
if m: print m.group(1)

这样做

words = text.text().split(/\s+/).reverse(),

工作示例here

Answer 2

问题是您在同一文本中一次又一次地使用wrap。这就是我所做的：

首先，我将任何新文本的类更改为newText：

  nodeEnter.append("text")
    .attr("x", function(d) {
      return d._children ? -0 : 8;
    })
    .attr("y", 3)
    .attr("dy", "0em")
    .attr("text-anchor", "middle")
    .attr("class", "newText")
    .text(function(d) {
      return d.name;
    })

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

然后，在函数点击中，我更改了所有文本的类：

    function click(d) {

  if (d.children) {
    d._children = d.children;
    d.children = null;

  } else {
    d.children = d._children;

  }
  d3.selectAll("text").attr("class", "text");
  update(d);
}

文本不会保留在d3树节点上

2 个答案: