Javascript 当d3.js中的单元格大小太小时删除文本

在d3树状图中，当一个节点与其他节点相比具有非常大的值时，只会显示较大的节点，而其他节点将不可见或隐藏。在某些情况下，小单元格将可见，但文本边距将被切断。如何在单元格太小时删除文本或使其在d3树状图中响应。 我的代码在链接中 我的代码

从“React”导入React；
从“d3”导入*作为d3；
类Treegraph扩展了React.Component{
状态={
宽度：400，
身高：400
};
createTreeChart=（）=>{
变量宽度=100，//%单位用于CSS响应
高度=100，
捕捉=捕捉| | 0.0001，
x=d3
.scaleLinear（）
.domain（[0，宽度]）
.范围（[0，宽度]），
y=d3
.scaleLinear（）
.domain（[0，高度]）
.范围（[0，高度]），
//蓝色=d3.hsl（216,0.92,0.68），，
平铺=（节点，x0，y0，x1，y1）=>{
d3.树状结构（节点，0，0，宽度，高度）；
for（node.children的常量子节点）{
child.x0=x0+（child.x0/宽度）*（x1-x0）；
child.x1=x0+（child.x1/宽度）*（x1-x0）；
child.y0=y0+（child.y0/身高）*（y1-y0）；
child.y1=y0+（child.y1/身高）*（y1-y0）；
}
},
treemap=d3
.treemap（）
.尺寸（[宽度、高度]）
.瓷砖（瓷砖）
.paddingner（0）
.圆形（假），
数据={
名称：“段”，
栏目名称：“A”，
儿童：[
{
名称：“A1-a小节”，
栏目名称：“A”，
价值：2100，
儿童：[
{
名称：“B1-b小节”，
栏目名称：“B”，
价值：520，
儿童：[
{
名称：“C1-C小节”，
栏目名称：“C”，
价值：85248197
}
]
},
{
名称：“B2-b小节”，
栏目名称：“B”，
价值：500，
儿童：[
{
名称：“C1-c小节”，
栏目名称：“C”，
价值：500
}
]
}
]
},
{
名称：“A2-a小节”，
栏目名称：“A”，
价值：2000年，
儿童：[
{
名称：“B1-a小节”，
栏目名称：“B”，
价值：1500，
儿童：[
{
名称：“C1-a小节”，
栏目名称：“C”，
价值：1248197
}
]
},
{
名称：“B2-a小节”，
栏目名称：“B”，
价值：500，
儿童：[
{
名称：“C1-a小节”，
栏目名称：“C”，
价值：500
}
]
}
]
}
]
},
路径名=[]，
节点=d3
.层次结构（数据）
.sum（d=>{
return！d.children&&d.value；
})
.sort（（a，b）=>！a.children&&a.value-！b.children&&b.value），
resizeTimer，
电流深度；
树映射（节点）；
var图表=d3。选择（“图表”）；
变量单元格=图表
.selectAll（“.node”）
.data（节点.子体（））
.输入（）
.附加（“div”）
.attr（“类”，函数（d）{
//log（“d.depth函数”，d）；
返回“节点级别-”+d.depth；
})
.attr（“zndex”，函数（d）{
//log（“d.depth函数”，d）；
返回110-d深度；
})
.attr（“标题”，功能（d）{
返回d.data.name？`${d.data.name}（${d.data.value}）`：“null”；
});
细胞
//.style（“transform”，函数（d）{return”translateY（“+chart.node（）.clientHeight*y（d.y0）/100+”）；）
.样式（“左”，功能（d）{
//log（x（d.x0）+“=>”+最近的（x（d.x0），snap））；
返回最近的（x（d.x0），捕捉）+“%”；
})
.样式（“顶部”，功能（d）{
//console.log（y（d.y0）+“=>”+最近的（y（d.y0），snap））；
返回最近值（y（d.y0），捕捉）+“%”；
})
.样式（“宽度”，功能（d）{
返回最近的（x（d.x1）-x（d.x0），捕捉）+“%”；
})
.样式（“高度”，功能（d）{
//console.log(
//y（d.y1）-y（d.y0）+“=>”+最近的（y（d.y1）-y（d.y0），捕捉）
// );
返回最近的（y（d.y1）-y（d.y0），捕捉）+“%”；
})
.样式（“z索引”，函数（d）{
//每个节点级别的动态zindex
返回d.data.name！==“段”&&110-d.depth；
})
//.style（“背景图像”，函数（d）{返回d.value？imgUrl+d.value:；}）
.样式（“背景色”，功能（d）{
返回“橙色”；
})
。打开（“单击”，缩放）；
细胞
.附加（“p”）
.attr（“类别”、“标签”）
.文本（功能（d）{
返回d.data.name？d.data.name:“空”；
})
.attr（“文本锚定”、“中间”）；
var parent=d3
.选择（“.logo”）
.基准面（节点）
。打开（“单击”，缩放）；
//由于我们使用100*100%树形图大小，无法重新划分。Doh！
d3.选择（窗口）.on（“调整大小”，函数（）{
clearTimeout（resizeTimer）；
resizeTimer=setTimeout（重绘，250）；
});
showPath（nodes.祖先（））；
功能缩放（d）{
// http://jsfiddle.net/ramnathv/amszcymq/
//console.log（“单击：+d.data.name+”，深度：+d.depth）；
showPath（d.祖先（））；
currentDepth=d.深度；
基准面（d.parent | |节点）；
x、 域（[d.x0，d.x1]）；
y、 域（[d.y0，d.y1]）；
var t=d3
.transition（）
import React from "react";
import * as d3 from "d3";

class Treegraph extends React.Component {
  state = {
    width: 400,
    height: 400
  };
  createTreeChart = () => {
    var width = 100, // % units for CSS responsiveness
      height = 100,
      snap = snap || 0.0001,
      x = d3
        .scaleLinear()
        .domain([0, width])
        .range([0, width]),
      y = d3
        .scaleLinear()
        .domain([0, height])
        .range([0, height]),
      //blue = d3.hsl(216, 0.92, 0.68),,
      tile = (node, x0, y0, x1, y1) => {
        d3.treemapBinary(node, 0, 0, width, height);
        for (const child of node.children) {
          child.x0 = x0 + (child.x0 / width) * (x1 - x0);
          child.x1 = x0 + (child.x1 / width) * (x1 - x0);
          child.y0 = y0 + (child.y0 / height) * (y1 - y0);
          child.y1 = y0 + (child.y1 / height) * (y1 - y0);
        }
      },
      treemap = d3
        .treemap()
        .size([width, height])
        .tile(tile)
        .paddingInner(0)
        .round(false),
      data = {
        name: "SEGMENTS",
        columnName: "A",
        children: [
          {
            name: "A1 - subsection of a",
            columnName: "A",
            value: 2100,
            children: [
              {
                name: "B1 - subsection of b",
                columnName: "B",
                value: 520,
                children: [
                  {
                    name: "C1  - subsection of C",
                    columnName: "C",
                    value: 85248197
                  }
                ]
              },
              {
                name: "B2 - subsection of b",
                columnName: "B",
                value: 500,
                children: [
                  {
                    name: "C1 - subsection of c",
                    columnName: "C",
                    value: 500
                  }
                ]
              }
            ]
          },
          {
            name: "A2 - subsection of a",
            columnName: "A",
            value: 2000,
            children: [
              {
                name: "B1 - subsection of a",
                columnName: "B",
                value: 1500,
                children: [
                  {
                    name: "C1 - subsection of a",
                    columnName: "C",
                    value: 1248197
                  }
                ]
              },
              {
                name: "B2 - subsection of a",
                columnName: "B",
                value: 500,
                children: [
                  {
                    name: "C1 - subsection of a",
                    columnName: "C",
                    value: 500
                  }
                ]
              }
            ]
          }
        ]
      },
      pathNames = [],
      nodes = d3
        .hierarchy(data)
        .sum(d => {
          return !d.children && d.value;
        })
        .sort((a, b) => !a.children && a.value - !b.children && b.value),
      resizeTimer,
      currentDepth;

    treemap(nodes);

    var chart = d3.select("#chart");
    var cells = chart
      .selectAll(".node")
      .data(nodes.descendants())
      .enter()
      .append("div")
      .attr("class", function(d) {
        // console.log("The d.depth function", d);
        return "node level-" + d.depth;
      })
      .attr("zndex", function(d) {
        // console.log("The d.depth function", d);
        return 110 - d.depth;
      })
      .attr("title", function(d) {
        return d.data.name ? `${d.data.name} (${d.data.value})` : "null";
      });

    cells
      //.style("transform", function(d) { return "translateY(" + chart.node().clientHeight * y(d.y0) / 100 + ")"; })
      .style("left", function(d) {
        //console.log( x(d.x0) + " => " + nearest(x(d.x0), snap) );
        return nearest(x(d.x0), snap) + "%";
      })
      .style("top", function(d) {
        // console.log(y(d.y0) + " => " + nearest(y(d.y0), snap));
        return nearest(y(d.y0), snap) + "%";
      })
      .style("width", function(d) {
        return nearest(x(d.x1) - x(d.x0), snap) + "%";
      })
      .style("height", function(d) {
        // console.log(
        //   y(d.y1) - y(d.y0) + " => " + nearest(y(d.y1) - y(d.y0), snap)
        // );
        return nearest(y(d.y1) - y(d.y0), snap) + "%";
      })
      .style("z-index", function(d) {
        // dynamic zindex for each node levels
        return d.data.name !== "SEGMENTS" && 110 - d.depth;
      })
      //.style("background-image", function(d) { return d.value ? imgUrl + d.value : ""; })
      .style("background-color", function(d) {
        return "orange";
      })
      .on("click", zoom);

    cells
      .append("p")
      .attr("class", "label")
      .text(function(d) {
        return d.data.name ? d.data.name : "null";
      })
      .attr("text-anchor", "middle");
    var parent = d3
      .select(".logo")
      .datum(nodes)
      .on("click", zoom);

    // can't resquarify as we use 100*100% treemap size. Doh!
    d3.select(window).on("resize", function() {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(redraw, 250);
    });

    showPath(nodes.ancestors());

    function zoom(d) {
      // http://jsfiddle.net/ramnathv/amszcymq/

      // console.log("clicked: " + d.data.name + ", depth: " + d.depth);

      showPath(d.ancestors());

      currentDepth = d.depth;
      parent.datum(d.parent || nodes);

      x.domain([d.x0, d.x1]);
      y.domain([d.y0, d.y1]);

      var t = d3
        .transition()
        .duration(800)
        .ease(d3.easeCubicOut);

      cells
        .transition(t)
        .style("left", function(d) {
          return nearest(x(d.x0), snap) + "%";
        })
        .style("top", function(d) {
          return nearest(y(d.y0), snap) + "%";
        })
        .style("width", function(d) {
          return nearest(x(d.x1) - x(d.x0), snap) + "%";
        })
        .style("height", function(d) {
          return nearest(y(d.y1) - y(d.y0), snap) + "%";
        });

      cells // hide this depth and above
        .filter(function(d) {
          return d.ancestors();
        })
        .classed("hide", function(d) {
          return d.children ? true : false;
        });

      cells // show this depth + 1 and below
        .filter(function(d) {
          return d.depth > currentDepth;
        })
        .classed("hide", false);

      // if currentDepth == 3 show prev/next buttons
    }

    function redraw() {
      // console.log("window resized");

      treemap(nodes); //?
      //cells
      //    .datum(nodes)
      //    .call(zoom);
    }

    function showPath(p) {
      console.log("THE PATH", p);
      var path = d3
        .select(".breadcrumb")
        .selectAll("a")
        .data(
          p
            .map(function(d) {
              console.log("LOG the MAP FUNC", d);
              return d;
            })
            .reverse()
        );
      var path1 = d3
        .select(".breadcrumb")
        .selectAll("span")
        .data(
          p
            .map(function(d) {
              console.log("LOG the MAP FUNC", d);
              return d;
            })
            .reverse()
        );
      path.exit().remove();
      path1.exit().remove();

      console.log("THE PATHNAMES LOG", pathNames);
      path1
        .enter()
        .append("span")
        .attr("class", "activeNode")
        .html(function(d) {
          console.log("the d in second html", d);
          if (d.data.name !== "SEGMENTS" && d.data.children) {
            return ` <div> ${d.data.name} </div> <p class="right-symbol">></p>`;
          }
          if (!d.data.children) {
            return `<div > ${d.data.name} </div>`;
          }
        });
      path
        .enter()
        .append("a")
        .attr("href", "#")
        .html(function(d) {
          console.log("the d in html", d.data.columnName);
          return d.data.children && `${d.data.children[0].columnName} /`;
        })
        .on("click", zoom);
    }

    function nearest(x, n) {
      return n * Math.round(x / n);
    }
  };
  componentDidMount() {
    this.createTreeChart();
  }
  render() {
    return (
      <React.Fragment>
        <nav>
          {/* <div class="logo"></div> */}
          <div className="breadcrumb" />
        </nav>
        <div className="feature" id="chart" />
      </React.Fragment>
    );
  }
}

export default Treegraph;

const containerHeight = d3
   .select(".feature")
   .node()
   .getBoundingClientRect().height;

const containerWidth = d3
   .select(".feature")
   .node()
   .getBoundingClientRect().width;

const allLabels = d3.selectAll(".label").nodes();

d3.selectAll(".label").style("display", (d, idx) => {
   const { width, height } = allLabels[idx].getBoundingClientRect();

   const parentWidth = (d.x1 - d.x0) * containerWidth / 100.0;
   const parentHeight = (d.y1 - d.y0) * containerHeight / 100.0;

   if (width > parentWidth || height > parentHeight) return "none";
   return "";
});