Function filter not working as expected in d3js
Function filter not working as expected in d3js
I have this HTML structure
<g class="type type-project" id="g-nsmart_city_lab" transform="translate(954.9537424482861,460.65694411587845)">
<circle class="highlighter-circles" fill-opacity="0" r="70" fill="rgb(150,150,150)" id="hc-nsmart_city_lab"></circle>
<circle class="node" r="50" fill="#768b83" id="nsmart_city_lab" filter="url(#blur)"></circle>
<text font-family="Comic Sans MS" font-size="18px" fill="black" class="nodetext" id="t-nsmart_city_lab" style="text-anchor: middle;" x="0" y="0">SMART CITY LAB</text>
<image href="./icons/project.svg" width="30" height="30" id="i-nsmart_city_lab" class="nodeimg"></image>
<image href="./icons/expand2.svg" width="30" height="30" for-node="nsmart_city_lab" x="25" y="-45" id="ne-nsmart_city_lab" class="nodeexp" style="visibility: hidden;" data-expandable="false"></image>
<circle class="inv_node" r="50" fill="red" fill-opacity="0" id="inv_nsmart_city_lab"></circle>
</g>
and I want to to something with the g elements that fulfill certain condition. But when doing,
g
d3.selectAll("g.type").filter(g_element => g_element.class !== "whatever");
d3.selectAll("g.type").filter(g_element => g_element.class !== "whatever");
the filter does not work as expected (at least for me). g_element.class is undefined. After debugging, for some reason the filtering is returning <circle class="node" r="50" fill="#768b83" id="nsmart_city_lab" filter="url(#blur)"></circle> instead of a g object to access its attributes and do the filtering.
g_element.class
undefined
<circle class="node" r="50" fill="#768b83" id="nsmart_city_lab" filter="url(#blur)"></circle>
g
How could this be done then ?
Here you have a jsfiddle which always returns undefined, https://jsfiddle.net/k6Ldxtof/40/
selection.filter()
this
.filter((_, i, nodes) => nodes[i].class !== "whatever")
Thank you! You should have put that as an answer. As long as you do that I will award you the answer approval since you first answered. :)
– Thomas
Sep 3 at 9:27
@altocumulus
nodes[i].class won't work.– Gerardo Furtado
Sep 3 at 9:28
nodes[i].class
In my case worked Gerardo, I am using version 4.
– Thomas
Sep 3 at 9:29
@Thomas This is not a competition to see who's quicker. Besides that, we (I and altocumulus) posted the comment/answer at the same time, 1min apart. But I can delete it if you want.
– Gerardo Furtado
Sep 3 at 9:29
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Have a look at the docs on
selection.filter(): the first parameter of the function is the datum bound to the element. The element itself is available asthisusing conventional functions instead of an arrow function or, for ES6, via the second and third parameter:.filter((_, i, nodes) => nodes[i].class !== "whatever").– altocumulus
Sep 3 at 9:21