D3.js按类分组文本元素：实现显示与隐藏切换

嘿，作为D3新手遇到这种逐个引用变量的麻烦太正常啦！其实D3本身就支持类选择器批量操作元素，完全不用再一个个存变量，我给你一步步讲怎么改：

1. 给文本元素分类加类名 #

首先，在创建文本的时候，把需要统一控制的文本归为同一类，比如你需要切换显示的两组文本，分别给它们加不同的类名（可以按功能命名，方便识别）：

// 第一组：点击按钮A要显示的文本，初始隐藏
svg.append("text")
  .attr("class", "text-group-a")
  .attr('visibility','hidden')
  .attr("x", 30)
  .attr("y", 55)
  .text("Blah...");

svg.append("text")
  .attr("class", "text-group-a")
  .attr('visibility','hidden')
  .attr("x", 30)
  .attr("y", 75)
  .text("Another Blah...");

// 第二组：点击按钮B要显示的文本，初始显示
svg.append("text")
  .attr("class", "text-group-b")
  .attr("x", 30)
  .attr("y", 95)
  .text("Other content...");

2. 用类选择器绑定按钮点击事件 #

接下来，给你的两个按钮绑定点击事件，通过d3.selectAll()选中对应类的所有文本，批量修改它们的可见性：

// 按钮1：显示A组，隐藏B组
d3.select("#btn-show-a").on("click", function() {
  d3.selectAll(".text-group-a").attr("visibility", "visible");
  d3.selectAll(".text-group-b").attr("visibility", "hidden");
});

// 按钮2：显示B组，隐藏A组
d3.select("#btn-show-b").on("click", function() {
  d3.selectAll(".text-group-a").attr("visibility", "hidden");
  d3.selectAll(".text-group-b").attr("visibility", "visible");
});

3. 补充HTML按钮（如果还没加） #

记得在HTML里给按钮加上对应的id，这样D3才能准确选中它们：

<button id="btn-show-a">显示A组文本</button>
<button id="btn-show-b">显示B组文本</button>

小提示：两种隐藏方式的区别 #

• attr("visibility", "hidden")：元素会保留原来的位置，只是看不见
• style("display", "none")：元素会完全从页面布局中消失，不占位置
  你可以根据自己的布局需求选其中一种就行~

这样一来，不管你有多少个文本元素，只要类名加对了，一行代码就能批量控制，再也不用一个个写变量名啦！

内容的提问来源于stack exchange，提问作者Yian