Question

我有带有文本换行的可缩放树图，如果文本不适合矩形，我想隐藏它。

示例：

Imgur Imgur

树形图基于http://bl.ocks.org/ganeshv/6a8e9ada3ab7f2d88022代码。

在Ganeshv的代码中，文本位于tspan中，如果文本的长度比容器长，则其不透明度会更改。我注意到有足够大的矩形，如果将其包裹起来，很容易适合文本。

我尝试了包装文本以及字体缩放，但是它产生了一些意外的行为，最后我将tspan更改为foreignObject。

现在文本可以按我的方式自动换行，但是我对于太小的容器中的文本有疑问。

我尝试将字体大小更改为0或将不透明度更改为1，但无法比较容器高度和文本高度。这种工作的唯一方法就是设置容器的最小高度和宽度，并隐藏所有小于此高度的容器，但这只是临时解决方案。

代码如下：

    g.append("foreignObject")
        .call(rect)
        .attr("class","foreignobj")
        .append("xhtml:div")
        .attr("dy", ".75em")
        .html(function(d) {return d.key +" r." +"</br>" +formatNumber(d.value);})
        .attr("class","textdiv") 

    g.append("title")
      .text(function(d) { return d.key + " (" + formatNumber(d.value) + ")"; }) //tooltip

    g.selectAll("rect")
        .style("fill", function(d) { return color(d.key); });

    function transition(d) {
      if (transitioning || !d) return;
      transitioning = true;

      var g2 = display(d),
          t1 = g1.transition().duration(750),
          t2 = g2.transition().duration(750);

      // Update the domain only after entering new elements.
      x.domain([d.x, d.x + d.dx]);
      y.domain([d.y, d.y + d.dy]);

      // Enable anti-aliasing during the transition.
      svg.style("shape-rendering", null);

      // Draw child nodes on top of parent nodes.
      svg.selectAll(".depth").sort(function(a, b) { return a.depth - b.depth; });

      // Fade-in entering text.
      g2.selectAll("text").style("fill-opacity", 0);
      g2.selectAll("foreignObject div").style("display", "none"); 

      t1.selectAll("text").call(text).style("fill-opacity", 0);
      t2.selectAll("text").call(text).style("fill-opacity", 1);
      t1.selectAll("rect").call(rect);
      t2.selectAll("rect").call(rect);

      t1.selectAll(".textdiv").style("display", "none");
      t1.selectAll(".foreignobj").call(foreign);
      t2.selectAll(".textdiv").style("display", "block");
      t2.selectAll(".foreignobj").call(foreign); 

      // Remove the old node when the transition is finished.
      t1.remove().each("end", function() {
        svg.style("shape-rendering", "crispEdges");
        transitioning = false;
      });
    }

    return g;
  }
  function text(text) {
          text.attr("x", function(d) { return x(d.x) + 6; })
          .attr("y", function(d) { return y(d.y) + 6; })

          // .style('font-size', function(d){
          //     if(this.offsetWidth < 20 ||this.offsetHeight > 60) {return 0;}
          // })

      }

  function foreign(foreign){ 
            foreign.attr("x", function(d) { return x(d.x); })
            .attr("y", function(d) { return y(d.y); })
            .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
            .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); })



        }
  function rect(rect) {
    rect.attr("x", function(d) { return x(d.x); })
        .attr("y", function(d) { return y(d.y); })
        .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
        .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); });
  }
  function name(d) {
    return d.parent
        ? name(d.parent) + " / " + d.key : d.key;
  }
}

我迷路了，不知道该如何解决。

如果d3可缩放树形图不适合容器，如何隐藏文本

0 个答案: