I have the following structure in my DOM
\ < circle class="svg-triangle" xcoordinates="37618.0859375" \ycoordinates="-4401.990234375" \ radius="300" jobid="F5-0301" id="jobid_29126" ipaddress="1.1.1.2" \
I need to select all circles having their ipaddress starting with "1.1" or their jobid matching a certain pattern, such as "jobid_29"
How can this be achieved using D3.js?
On the back of the positive answers I have received I would like an additional feature added to my circles.
I need to add animation to my circles when a pattern selection is met. something similar to this https://codepen.io/riccardoscalco/pen/GZzZRz
For example when a search criteria is entered into an input box say "1.1" I need to apply animation to all circles having their Ipaddress starting with the input value.
This is what I have tried so far without success.
html:
<label id="InteractiveSearch" style="font-weight:bold"> Interactive Seach :
</label>
<input id="searchInput" type="text" placeholder="Ipaddress or Space ID...">
script:
$("#searchInput").on("keyup", function () { d3.selectAll("circle[ipaddress^='" + $(this).val() +"'").attr("class","svg-triangle pulse") });`
css:
.pulse {
fill: white;
fill-opacity: 0;
transform-origin: 50% 50%;
animation-duration: 2s;
animation-name: pulse;
animation-iteration-count: infinite;
}
@keyframes pulse {
from {
stroke-width: 3px;
stroke-opacity: 1;
transform: scale(0.3);
}
to {
stroke-width: 0;
stroke-opacity: 0;
transform: scale(2);
}
}
