Javascript D3 v4更改文本相关节点的不透明度

我是D3的新手，正在尝试解决以下场景。我有几个与上下文相关的节点。所有这些都显示得很好，我想进一步添加一个HTML选择器按钮，它可以更改所有未选中节点的颜色和不透明度

目标是通过更改非选定节点的颜色和不透明度来高亮显示选定内容。我不希望像这样完全删除它们，因为某些节点将来将是多个上下文的成员

我想我们社区的群智能可能会有个主意。提前谢谢

var图={
节点：[
{id:“0001”，名称：“s02vmware”，文本：“Jira”，组：1}，
{id:“0002”，名称：“v133atlas”，文本：“Jira”，组：2}，
{id:“0003”，名称：“Linux”，文本：“Jira”，组：2}，
{id:“0004”，名称：“PostgreSQL”，文本：“Jira”，组：2}，
{id:“0005”，名称：“OpenSSH”，kontext:“Jira”，组：2}，
{id:“0006”，名称：“Nginx”，文本：“Jira”，组：2}，
{id:“0007”，名称：“汇流”，文本：“Jira”，组：3}，
{id:“0008”，名称：“Tomcat”，文本：“Jira”，组：3}，
{id:“0009”，名称：“Java”，文本：“Jira”，组：3}，
{id:“0010”，名称：“Test1”，文本：“Ivis”，组：1}，
{id:“0011”，名称：“Test2”，文本：“Ivis”，组：2}，
{id:“0012”，名称：“Test3”，文本：“Ivis”，组：2}，
],
链接：[
{来源：“0001”，目标：“0002”}，
{来源：“0002”，目标：“0003”}，
{来源：“0004”，目标：“0003”}，
{来源：“0005”，目标：“0003”}，
{来源：“0006”，目标：“0003”}，
{来源：“0007”，目标：“0003”}，
{来源：“0008”，目标：“0007”}，
{来源：“0009”，目标：“0007”}，
{来源：“0010”，目标：“0012”}，
{来源：“0011”，目标：“0010”}，
{来源：“0012”，目标：“0011”}，
]
};
var svg=d3。选择（“svg”），
宽度=window.innerWidth，
高度=窗内高度；
var color=d3.scaleOrdinal（d3.schemeCategory 20）；
var simulation=d3.forceSimulation（）
.force（“link”，d3.forceLink（）.id（函数（d）{return d.id；}）.distance（100））
.force（“电荷”，d3.forceManyBody（））
.力（“中心”，d3.力中心（宽度/2，高度/2））
.力（“牵引力”，d3.力多体（）.强度（-80））；
var link=svg.append（“g”）
.attr（“类”、“链接”）
.selectAll（“行”）
.数据（图表.链接）
.enter（）.append（“行”）
.attr（“笔划宽度”，2）；
var node=svg.selectAll（“.node”）
.数据（图.节点）
.enter（）.append（“g”）
.attr（“类”、“节点”）
.on（“鼠标悬停”，鼠标悬停）
.on（“mouseout”，mouseout）
/*
。在“单击”时，函数（d）{
过渡部（）
.持续时间（200）
.样式（“不透明度”，0.9）；
html（（d.name）+“
”+d.close）
.style（“左”，“d3.event.pageX）+“px”）
.style（“顶部”（d3.event.pageY-28）+“px”）*/
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
。在（“结束”，dragended））；
node.append（“圆”）
.attr（“r”，15）
.attr（“fill”，函数（d）{返回颜色（d.group）；}）；
node.append（“文本”）
.attr（“dy”，-20）
.text（函数（d）{返回d.name；}）；
模拟
.nodes（图.nodes）
。在（勾选）上；
模拟力（“链接”）
.links（图形链接）；
函数勾选（）{
链接
.attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
node.attr（“转换”，函数（d）{
返回“translate”（“+d.x+”，“+d.y+”）；
});
}
函数dragstarted（d）{
如果（！d3.event.active）simulation.alphaTarget（0.3.restart（）；
d、 fx=d.x；
d、 fy=d.y；
}
函数（d）{
d、 fx=d3.event.x；
d、 fy=d3.event.y；
}
函数d（d）{
如果（！d3.event.active）simulation.alphaTarget（0）；
d、 fx=null；
d、 fy=null；
}
函数mouseover（）{
d3.选择（这个）。选择（“圆”）。过渡（）
.持续时间（100）
.attr（“r”，20）；
}
函数mouseout（）{
d3.选择（这个）。选择（“圆”）。过渡（）
.持续时间（500）
.attr（“r”，15）；
}

/*待办事项：添加样式*/
.垂直网格{
冲程：#ccc；
}
.纵坐标文本{
字体大小：10px；
变换：translateY（10px）；
}
分区工具提示{
位置：绝对位置；
文本对齐：居中；
宽度：自动；
高度：自动；
填充：2px；
字体：12px无衬线；
背景：淡蓝色；
边界：0px；
边界半径：8px；
指针事件：无；
不透明度：0；
填充物：5px；
}
.右对齐{
位置：绝对位置；
右：100px；
}
.盒子，
.标签{
显示：内联块；
}
.盒子{
宽度：10px；
高度：10px；
利润率：0px 10px；
}

D3.js上的理想iDEP
01-吉拉
02-Ivis
无论什么

您希望选择菜单中的值代表每个文本：

  <select>
    <option value="Jira">01 - Jira</option>
    <option value="Ivis">02 - Ivis</option>
    <option value="All" selected>Whatever</option>
  </select>

综上所述，我们得到：

var图={
节点：[
{id:“0001”，名称：“s02vmware”，文本：“Jira”，组：1}，
{id:“0002”，名称：“v133atlas”，文本：“Jira”，组：2}，
{id:“0003”，名称：“Linux”，文本：“Jira”，组：2}，
{id:“0004”，名称：“PostgreSQL”，文本：“Jira”，组：2}，
{id:“0005”，名称：“OpenSSH”，kontext:“Jira”，组：2}，
{id:“0006”，名称：“Nginx”，文本：“Jira”，组：2}，
{id:“0007”，名称：“汇流”，文本：“Jira”，组：3}，
{id:“0008”，名称：“Tomcat”，文本：“Jira”，组：3}，
{id:“00
d3.select("select").on("change", function() {
  var value = this.value;
  
 // Reset every node:
  node.style("opacity", 1) // change opacity back for every node
      .select("circle")    // select the circle to alter its color
      .style("fill", function(d) { return color(d.group); });
      
  // If "All" isn't selected, filter for the selected value:
  if(value != "All") {
    node.filter(function(d) { return d.kontext != value; })
        .style("opacity", 0.5) // Change the opacity of text and circle for filtered items
        .select("circle")      // select the circle to alter its color
        .style("fill","#aaa");
  }
})