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

标签 javascript html css d3.js

我有一个 d3 可视化，其中包含各种文本类别和一个搜索框。我希望一类文本(“second”)最初的 font-size 为 0。如果与搜索框的内容匹配，我想让“second”的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";  
})

(error code: typeError: frat is undefined.)

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

(two error codes: typeError: frat is undefined. and 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"; })

我得到了错误代码

(error code: typeError: frat is undefined.)

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

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

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

没有运气，唉

更新#3

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

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

最佳答案

修复上面的代码:删除 rects。您可以通过引用 svg 来执行代码的交互方面。

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

这是代码。我将“鸟”放入数据集的其中一行。搜索术语“bird”应该删除除相关 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>

关于javascript - 对文本元素进行条件操作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57166415/

上一篇：javascript - 编译 ejs 时出现意外的标记 )

下一篇：css - 条纹输入字段宽度非常小

相关文章：

javascript - 如何修复在 JavaScript 中使用 ctx.lineTo 显示为奇怪形状的六边形？

javascript - 将新时区添加到 moment.js 时区

javascript - 从父容器获取点击事件(某些子容器除外)

css - 如何使用 Compass 过滤器 mixin？

html - 图片上的下拉菜单

javascript 模块创建和初始化

javascript - 如何在不使用ajax提交表单的情况下将文本值发送到服务器

html - 如何使 jquery-ui 标签没有换行符？

javascript - 搜索栏模仿者

css - 如何访问数据属性的值并在 CSS 声明中使用它

©2024 IT工具网  联系我们