对文本元素进行条件操作？

【问题标题】：Conditional manipulation on the text element?对文本元素进行条件操作？
【发布时间】：2019-07-23 14:28:11
【问题描述】：

我有一个 d3 可视化，其中包含各种文本类别和一个搜索框。我希望一类文本（“第二”）最初具有0 的font-size。如果与搜索框的内容匹配，我希望“秒”的font-size变成12。

我最初尝试通过在“第二个”文本上放置一个矩形来做到这一点，如果不匹配，则让矩形变为纯白色以覆盖文本。 

d3.select("#txtName").on("keydown", function() {
  var txtName = d3.select("#txtName").node().value;
  var meow = function(frat) {
    return frat.includes(txtName.toLowerCase());
  }
  rect.style("opacity", function(d) {
    return meow(d.TooltipInfo) === true ? "1" : "0";  
  })

但如果文本大小折叠起来会好得多，只留下文本类 label1 和 first 显示，因为我的用户抱怨信息过载（我的原始数据集包含大量信息并且所有文本屏幕上的课程，这是相当压倒性的）。 D3 似乎无法像选择矩形一样选择条件格式的文本。

这是我尝试过的：

svgs2.style("font-size", function(d) {
  return meow(d.TooltipInfo) === true ? "12" : "0";  
})

（错误代码：typeError：frat 未定义。）

svgs2.selectAll("text").style("font-size", function(d) {
  return meow(d.TooltipInfo) === true ? "12" : "0";  
})

（两个错误代码：typeError: frat is undefined.和undefined has no properties.）

var doc = URL.createObjectURL(new Blob([`TooltipInfo	Category	Function1	Function2	Retention
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	"General Furry, Program and Subject Files"	Average Quantity and Planning	Jack	5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Senate Committee on animal Standards	Bowl and Plate Design	Jack	5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Published Canine	Bowl and Plate Design	Jack	1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Canine case files	Bowl and Plate Design	Jack	1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Canine Files 	Avoiding Neck Strain	Jack	6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Canine Files 	Drooling	Jack	6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Canine Files 	Drooling	Jack	7
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	ADVERTISING	At home	Jack	7
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	PROMOTIONS	At home	Jack	100
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Publications	At homeio	Jack	5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Public and Information Services	At homeio	Jack	5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Petting Services	Getting special treats	Jack	1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Petting Services	Getting special treats	Jack	1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Petting Services	Getting special treats	Jack	5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Petting Services	Getting special pats	Snack	5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Petting Services	Getting special pats	Snack	1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Petting Services	Getting special pats	Snack	1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	DEVELOPMENT	Optimal time of day - walking	Snack	6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	INCOME AND REVENUE	Optimal time of day - walking	Snack	6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Fundraising	Optimal time of day - walking	Snack	7
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Fundraising	Optimal time of day	Snack	7
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	DEVELOPMENT	Optimal time of day	Snack	1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	INCOME AND REVENUE	Optimal time of day	Snack	5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Wishbone	Protective Measures	Snack	5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Wishbone	Protective Measures	Pack	1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Wishbone	Observant of Limps Etc	Pack	1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Wishbone	Observant of Limps Etc	Pack	8
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Wishbone	Observant of Limps Etc	Pack	8`]));

d3.tsv(doc)
  .row(function(d) {
    return {
      University: d.University,
      TooltipInfo: d.TooltipInfo,
      Category: d.Category,
      Function1: d.Function1,
      Function2: d.Function2,
      MaxRetentionRounded: d.MaxRetentionRounded,
      ModifiedRetention: d.ModifiedRetention
    };
  })
  .get(function(error, data) {


      //         var allGroup = d3.map(data, function(d){return(d.Function1)}).keys()
      // console.log(allGroup)

      // console.log(allGroup.length);
      var div = d3.select("body").append("div")
        .attr("class", "tooltip")
        .style("opacity", 0)

      var height = 150,
        width = 300;



      var nest = d3.nest()
        .key(function(d) {
          return d.Function2;
        })
        .key(function(d) {
          return d.Function1;
        })
        .key(function(d) {
          return d.Category;
        })
        .entries(data);

      // var div = d3.select("body").append("div")
      // 	.attr("class", "tooltip")
      // 	.style("opacity", 0)



      var height = 80,
        width = 150;


      var divs = d3.select(".container")
        .selectAll(null)
        .data(nest)
        .enter()
        .append("div")
        .attr("class", "innerdiv");

      divs.append("p")
        .html(function(d) {
          return d.key;
        });



      var divs2 = divs.selectAll(null)
        .data(function(d) {
          return d.values;
        })
        .enter()
        .append('div')
        .attr("class", "first")


      divs2.append("text")
        .attr('class', 'label1')
        .attr('x', 0)
        .attr('y', 0)
        .style("font-size", "16px")
        .style("font-weight", "bold")
        .style("fill", "white")
        .attr("width", 400)
        .text(function(d) {
          return d.key;
        })
        .attr('text-anchor', 'start')

      var svgs2 = divs2.selectAll(null)
        .data(function(d) {
          return d.values;
        })
        .enter()
        .append('svg')
        .attr("class", "second")
        .attr("width", function(d) {
          return String(d.Category).length * 31
        })
        // .attr("width",200)
        .attr("height", 20);


      svgs2.append("text")
        .attr('class', 'label2')
        .attr('x', 10)
        .attr('y', 17)
        .style("font-size", "12px")
        .text(function(d) {
          return d.key;
        })
        .attr('text-anchor', 'start')


      var rect = svgs2.selectAll("rect")
        .data(data)
        .enter().append("rect")
        .attr("class", "bar")
        .filter(function(d, i) {
          const x = d3.select(this.parentNode).datum();
          return x.key == d.Category ? 1 : 0;
        })
        // .attr("transform", function(d, i) {return "translate(" + String(d.Category).length*7.3 + ",0)";})
        .attr("width", function(d, i) {
          return String(d.Category).length * 7.3
        })
        .attr("x", 5)
        .attr("y", 8)
        .attr("height", 20)

        // .attr("y", function(d,i) {return (height-40)-(d.MaxRetentionRounded*5);})
        .attr("fill", "transparent")
        // .style("opacity","0")
        .style("stroke", "transparent")
        .style("cursor", "pointer")
        .on("mouseover", function(d, i) {
          div.transition()
            .duration(200)
            .style("opacity", .9);
          div.html(`${d.TooltipInfo}`)
            .style("left", function() {
              return d3.event.pageX > (window.innerWidth * .75) ? d3.event.pageX - 520 + "px" : d3.event.pageX + "px"
            })
            .style("bottom", function() {
              var clientrect = d3.select(this).node().getBoundingClientRect();
              return d3.event.pageY > (window.innerHeight - clientrect.height) ? window.innerHeight - d3.event.pageY + "px" : window.innerHeight - d3.event.pageY - clientrect.height + "px"
            })
          // .style(function() {return "bottom"}, window.innerHeight - d3.event.pageY+20 +"px")
        })
        .on("mouseout", function(d) {
          div.transition()
            .duration(500)
            .style("opacity", 0);
        });

      // var rect2 = svgs2.selectAll("line")
      // .data(data)
      // .enter().append("line")
      // .attr("class", "bar")
      // .filter(function(d, i) {
      // 	const x = d3.select(this.parentNode).datum();
      // 	return x.key == d.Category ? 1 : 0;
      // })
      // .attr("x1", "0")
      // .attr("x2", function(d, i) {return String(d.Category).length*7.3})
      // .attr("y1", "10")
      // .attr("y2", "10")
      // // .attr("x2", "12")
      //
      // // .attr("transform", function(d, i) {return "translate(" + String(d.Category).length*7.3 + ",0)";})
      // .attr("stroke-width", 15)
      // .style("stroke","black")
      // .style("stroke-opacity",0)
      // .attr("x", function(d, i) {
      // 	return (i * 20)+10;
      // })
      //
      //
      // // .attr("y", function(d,i) {return (height-40)-(d.MaxRetentionRounded*5);})
      // .attr("fill", "blue")
      // .style("opacity","1");



      var hat = function(event) {
        if (event.which == 13 || event.keyCode == 13) {
          //code to execute here
          return false;
        }
        return true;
      };

      d3.select("#txtName").on("keydown", function() {
        var txtName = d3.select("#txtName").node().value;
        var meow = function(frat) {
          return frat.includes(txtName.toLowerCase());
        }
        //rect.style("fill", function(d) {
          //return meow(d.TooltipInfo) === true ? "yellow" : "transparent";
      //  })
        //rect.style("stroke", function(d) {
          //return meow(d.TooltipInfo) === true ? "black" : "transparent";
       // })
        rect.style("opacity", function(d) {
          return meow(d.TooltipInfo) === true ? "1" : "0";
        })
        divs2.selectAll("text").style("color", function(d) {
          return txtName.length > 1 ? "lightgray" : "black";
        })
        //svgs2.selectAll("text").style("font-size", function(d) {
          //return meow(d.TooltipInfo) === true ? "12" : "0";
        //})

      }) })
div.tooltip {
  position: absolute;
  text-align: left;
  width: 500px;
  height: auto;
  padding: 3px;
  font: 17px sans-serif;
  color: white;
  border: 0px;
  border-radius: 3px;
  pointer-events: none;
  background: black;
}

.tooltip {
  display: inline-block;
  text-indent: 0em;
}

h1 {
  font-size: 30px;
  font-family: "Consolas";
  float: left;
  margin: 0;
}

.container {
  display: flex;
  padding: 0px;
  flex: 1 1 1;
  flex-wrap: nowrap;
  float: left;
}

.innerdiv {
  text-align: left;
  font-size: 21px;
  font-family: "Consolas";
  flex: 1 1 1;
}

.innerdiv+.innerdiv {
  padding-left: 20px;
  border-left: 2px solid lightgray;
}

.legend {
  position: fixed;
  font-family: "Century Gothic";
}


/* div {width: auto; height: auto; } */

.first>*:first-child {
  width: 100%;
}

div.first {
  display: flex;
  padding: 0px;
  flex: 0 0 100%;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.0.0/d3.min.js"></script>

	<textarea id="txtName" name="txt-Name" style="width:600px; height:20px;" ></textarea>

<div class="container"></div>

有没有办法操纵文字的font-size？

更新：我终于想出了如何在不使用d3.selectAll 的情况下选择文本元素：svgs2.style("fill", "blue")。换句话说，一旦 keyup 事件被触发，下面的代码会将文本变为蓝色：

d3.select("#txtName").on("keydown", function() {
      var txtName = d3.select("#txtName").node().value;
      var meow = function(frat) {
        return frat.includes(txtName.toLowerCase());
      }
      rect.style("fill", function(d) {
        return meow(d.TooltipInfo) === true ? "yellow" : "transparent";
      })
      svgs2.style("fill", "blue")
})

但这并不能解决我的问题。如前所述，当我将函数应用于代码行时，即 svgs2.style("fill", function(d) {return meow(d.TooltipInfo) === true ? "black" : "transparent"; })

我得到错误代码

（错误代码：typeError：frat 未定义。）

Frat，meow 函数的参数，在上一行代码中运行时不会引发错误。这可能是因为meow 正在检查d.TooltipInfo 是否有与输入框匹配的单词。我猜d.TooltipInfo 实际上并没有与 svgs2 元素相关联，它返回为 frat 未定义。通过编写直接引用d.TooltipInfo 的条件来确认这一点。 （但是怎么可能没有svgs2元素关联的数据呢？svgs2来自数据集。）

更新 #2：我想我可以通过将 data 属性添加到 svgs2 元素来解决无法识别 d.TooltipInfo 的事实，如下所示：

svgs2.data(function(d) {return d.values;}).style("fill",function(d) {(d.values) === "advertising" ? "blue" : "transparent"; })

不走运，唉

更新 #3

终于知道 svg 是一个附加了文本的对象； svg 发生的任何条件格式也会发生在文本上。因此，将 svg 的 height 属性操作为 0 将正确折叠它，并消失单词 - 例如：svgs2.attr("height",function(d) {return txtName === d.TooltipInfo ? "20" : "0"; })

现在我只需要弄清楚如何使 svgs2 元素显式附加到数据集中的一行。

【问题讨论】：

    标签： javascript html css d3.js


    【解决方案1】：

    修复上述代码：删除矩形。您可以通过引用 svg 来完成代码的交互方面。

    接下来，无法通过标准function(d) {return d.InsertDataNameHere} 引用与 svgs 关联的数据集中的信息。相反，可以使用this 引用它们，如下所示：d3.select(this).datum().values[0].InsertDataNameHere。

    这是代码。我将“鸟”放入数据集的其中一行。搜索术语“鸟”应删除除相关 svg 对象之外的所有对象：

    var doc = URL.createObjectURL(new Blob([`TooltipInfo	Category	Function1	Function2	Retention
Lorem bird ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	"General Furry, Program and Subject Files"	Average Quantity and Planning	Jack	5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Senate Committee on animal Standards	Bowl and Plate Design	Jack	5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Published Canine	Bowl and Plate Design	Jack	1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Canine case files	Bowl and Plate Design	Jack	1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Canine Files 	Avoiding Neck Strain	Jack	6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Canine Files 	Drooling	Jack	6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Canine Files 	Drooling	Jack	7
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	ADVERTISING	At home	Jack	7
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	PROMOTIONS	At home	Jack	100
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Publications	At homeio	Jack	5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Public and Information Services	At homeio	Jack	5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Petting Services	Getting special treats	Jack	1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Petting Services	Getting special treats	Jack	1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Petting Services	Getting special treats	Jack	5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Petting Services	Getting special pats	Snack	5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Petting Services	Getting special pats	Snack	1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Petting Services	Getting special pats	Snack	1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	DEVELOPMENT	Optimal time of day - walking	Snack	6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	INCOME AND REVENUE	Optimal time of day - walking	Snack	6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Fundraising	Optimal time of day - walking	Snack	7
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Fundraising	Optimal time of day	Snack	7
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	DEVELOPMENT	Optimal time of day	Snack	1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	INCOME AND REVENUE	Optimal time of day	Snack	5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Wishbone	Protective Measures	Snack	5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Wishbone	Protective Measures	Pack	1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Wishbone	Observant of Limps Etc	Pack	1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Wishbone	Observant of Limps Etc	Pack	8
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum	Wishbone	Observant of Limps Etc	Pack	8`]));

d3.tsv(doc)
  .row(function(d) {
    return {
      University: d.University,
      TooltipInfo: d.TooltipInfo,
      Category: d.Category,
      Function1: d.Function1,
      Function2: d.Function2,
      MaxRetentionRounded: d.MaxRetentionRounded,
      ModifiedRetention: d.ModifiedRetention
    };
  })
  .get(function(error, data) {
    var div = d3.select("body").append("div")
      .attr("class", "tooltip")
      .style("opacity", 0)

    var height = 150,
      width = 300;



    var nest = d3.nest()
      .key(function(d) {
        return d.Function2;
      })
      .key(function(d) {
        return d.Function1;
      })
      .key(function(d) {
        return d.Category;
      })
      .entries(data);

    var height = 80,
      width = 150;


    var divs = d3.select(".container")
      .selectAll(null)
      .data(nest)
      .enter()
      .append("div")
      .attr("class", "innerdiv");

    divs.append("p")
      .html(function(d) {
        return d.key;
      });



    var divs2 = divs.selectAll(null)
      .data(function(d) {
        return d.values;
      })
      .enter()
      .append('div')
      .attr("class", "first")


    divs2.append("text")
      .attr('class', 'label1')
      .attr('x', 0)
      .attr('y', 0)
      .style("font-size", "16px")
      .style("font-weight", "bold")
      .style("fill", "white")
      .attr("width", 400)
      .text(function(d) {
        return d.key;
      })
      .attr('text-anchor', 'start')

    var svgs2 = divs2.selectAll(null)
      .data(function(d) {
        return d.values;
      })
      .enter()
      .append('svg')
      .attr("class", "second")
      .attr("width", function(d) {
        return String(d.Category).length * 31
      })
      // .attr("width",200)
      .attr("height", 20);


    svgs2.append("text")
      .attr('class', 'label2')
      .attr('x', 10)
      .attr('y', 17)
      .style("font-size", "12px")
      .text(function(d) {
        return d.key;
      })
      .attr('text-anchor', 'start')
      .style("cursor", "pointer")
      .on("mouseover", function(d, i) {
        // console.log(d3.select(this).datum().values[0].TooltipInfo)
        div.transition()
          .duration(200)
          .style("opacity", .9);
        div.html(d3.select(this).datum().values[0].TooltipInfo)
          .style("left", function() {
            return d3.event.pageX > (window.innerWidth * .75) ? d3.event.pageX - 520 + "px" : d3.event.pageX + "px"
          })
          .style("bottom", function() {
            var clientrect = d3.select(this).node().getBoundingClientRect();
            return d3.event.pageY > (window.innerHeight - clientrect.height) ? window.innerHeight - d3.event.pageY + "px" : window.innerHeight - d3.event.pageY - clientrect.height + "px"
          })
        // .style(function() {return "bottom"}, window.innerHeight - d3.event.pageY+20 +"px")
      })
      .on("mouseout", function(d) {
        div.transition()
          .duration(500)
          .style("opacity", 0);
      });
    var hat = function(event) {
      if (event.which == 13 || event.keyCode == 13) {
        //code to execute here
        return false;
      }
      return true;
    };

    d3.select("#txtName").on("keydown", function() {
      var txtName = d3.select("#txtName").node().value;
      var meow = function(frat) {
        return frat.includes(txtName.toLowerCase());
      }
      svgs2.attr("height", function(d) {
        return meow(d3.select(this).datum().values[0].TooltipInfo) === true ? "20" : "0";
      })
    })
  });
    div.tooltip {
  position: absolute;
  text-align: left;
  width: 500px;
  height: auto;
  padding: 3px;
  font: 17px sans-serif;
  color: white;
  border: 0px;
  border-radius: 3px;
  pointer-events: none;
  background: black;
}

.tooltip {
  display: inline-block;
  text-indent: 0em;
}

h1 {
  font-size: 30px;
  font-family: "Consolas";
  float: left;
  margin: 0;
}

.container {
  display: flex;
  padding: 0px;
  flex: 1 1 1;
  flex-wrap: nowrap;
  float: left;
}

.innerdiv {
  text-align: left;
  font-size: 21px;
  font-family: "Consolas";
  flex: 1 1 1;
}

.innerdiv+.innerdiv {
  padding-left: 20px;
  border-left: 2px solid lightgray;
}

.legend {
  position: fixed;
  font-family: "Century Gothic";
}


/* div {width: auto; height: auto; } */

.first>*:first-child {
  width: 100%;
}

div.first {
  display: flex;
  padding: 0px;
  flex: 0 0 100%;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<textarea id="txtName" name="txt-Name" style="width:600px; height:20px;" ></textarea>

<div class="container"></div>

    【讨论】：

      猜你喜欢
      • 2019-11-12
      • 1970-01-01
      • 2013-05-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-09
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode