我的DOM中有以下结构
\ <circle class ="svg-triangle"xcoordinates ="37618.0859375"\ ycoordinates =" - 4401.990234375"\ radius ="300"jobid ="F5-0301"id ="jobid_29126"ipaddress ="1.1.1.2"\
我需要选择所有ipaddress以"1.1"开头或者jobid匹配某种模式的圆圈,例如"jobid_29"
如何使用D3.js实现这一目标？
在我收到的肯定答案的背面,我想在我的圈子中添加一个额外的功能.
当满足模式选择时,我需要向我的圆圈添加动画.类似于这个 https://codepen.io/riccardoscalco/pen/GZzZRz
例如,当在输入框中输入搜索条件时说"1.1"我需要将动画应用于其Ipaddress以输入值开头的所有圆圈.
这是我迄今为止没有成功的尝试.
HTML:
<label id="InteractiveSearch" style="font-weight:bold"> Interactive Seach :
</label>
<input id="searchInput" type="text" placeholder="Ipaddress or Space ID...">
脚本:
$("#searchInput").on("keyup", function () { d3.selectAll("circle[ipaddress^='" + $(this).val() +"'").attr("class","svg-triangle pulse")});`
CSS:
.pulse {
填充:白色;
fill-opacity: 0;
变换起源:50%50%;
animation-duration: 2s;
动画名称:脉冲;
animation-iteration-count: infinite;
}
@keyframes pulse {
来自{
stroke-width: 3px;
stroke-opacity:1;
transform: scale(0.3);
}
to {
stroke-width:0;
stroke-opacity: 0; …