D3 - .filter a selectAll based on existence of item in array of child objects

Question

I have a grid of donut graphs. Let's say Star Wars characters with projects they are trying to achieve...

<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>

When a user hovers over an arc in one donut I would like to fade the names in donuts that do not have that project. So, if user hovers over "Save Princess" project, text for the Emperor's name would fade because he doesn't have that project.

What I have to do that:

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. 
  }

The console output from hasProject_test returns empty _groups.

Worked! Why are they a problem? Don't they just mean {some code here}? — kalmdown, Jun 30 '21 at 23:42
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions — Gerardo Furtado, Jun 30 '21 at 23:49
??? Note: As shown above, the { brackets } and ( parentheses ) and "return" are optional, but may be required. ... Seems like they shouldn't hurt. — kalmdown, Jul 01 '21 at 00:55
Yes, it's confusing. But further below it says: *"Likewise, if the body requires additional lines of processing, you'll need to re-introduce brackets PLUS the "return" (arrow functions do not magically guess what or when you want to "return")"*. That PLUS in all caps is theirs, not mine! So, if you add the brackets, you have to put the `return` as well. — Gerardo Furtado, Jul 01 '21 at 05:48
That said, my laconic first comment could've been *"Drop the curly braces OR add the return"*. — Gerardo Furtado, Jul 01 '21 at 05:50

D3 - .filter a selectAll based on existence of item in array of child objects

0 Answers0