D3 - .filter a selectAll 基于子对象数组中项目的存在

问题描述

我有一个甜甜圈图网格。假设星球大战角色的项目正在努力实现......

<div id="LukeSkywalker" class="cell">
  <svg>
    <path class="Get off Tatooine" d=""></path> 
    <path class="Save Princess" d=""></path> // class is name of project to test
    <text>Luke Skywalker</text> 
  </svg>
</div>
<div id="R2D2" class="cell">
  <svg>
    <path class="Find General Kenobi" d=""></path>
    <path class="Save Princess d=""></path>
    <text>R2-D2</text>
  </svg>
</div>
<div id="Emperor" class="cell">
  <svg>
    <path class="Finish Deathstar" d=""></path>
    <path class="Crush Rebellion" d=""></path>
    <text>The Emperor</text> // Text to fade
  </svg>
</div>

当用户将鼠标悬停在一个甜甜圈中的弧上时，我想淡化没有该项目的甜甜圈中的名称。因此，如果用户将鼠标悬停在“拯救公主”项目上，皇帝姓名的文本会消失，因为他没有该项目。

我必须这样做：

function hover(event,d) {

  const className = event.target.className;

  let hasProject_test = d3.selectAll(`div.cell`).filter((d) => {donutHasProject(d.projects,className)})
  console.log(" hasProject_test",hasProject_test)

  d3.selectAll(`div.cell`)
    .filter((d) => {donutHasProject(d.projects,className)})
    .selectAll(`text`)
    .append()
    .attr("class","faded")
  }

function donutHasProject (donutProjects,projectName)
  {
    let hasProject = true;
    for (let i = 0; i < donutProjects.length; ++i) {
      if (cleanName(donutProjects[i].project) === projectName) // cleanName removes spaces.
        hasProject = false;
    }
    return hasProject // Seems to be working. Have tested here and true/false is set correctly per donut. 
  }

hasProject_test 的控制台输出返回空的 _groups。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript selectall