我的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;
变换:规模(2);
}
}
要选择所有以其ipaddress开头的圈子1.1,请使用"starts with" 属性选择器:
[ATTR ^ =值]
表示属性名称为attr的元素,其值以值为前缀(前置).
这是使用您的结构的基本演示.有四个圆圈,然后我选择那些ipaddress以1.1(第一个和第二个)开头并将它们涂成绿色的圆圈:
d3.selectAll("circle[ipaddress^='1.1']").style("fill", "lime")<script src="https://d3js.org/d3.v5.min.js"></script>
<svg>
<circle cx="50" cy="100" class="svg-triangle" xcoordinates="37618.0859375" ycoordinates="-4401.990234375" r="20" jobid="F5-0301" id="jobid_29126" ipaddress="1.1.1.2"></circle>
<circle cx="100" cy="100" class="svg-triangle" xcoordinates="37618.0859375" ycoordinates="-4401.990234375" r="20" jobid="F5-0301" id="jobid_29126" ipaddress="1.1.1.2"></circle>
<circle cx="150" cy="100" class="svg-triangle" xcoordinates="37618.0859375" ycoordinates="-4401.990234375" r="20" jobid="F5-0301" id="jobid_29126" ipaddress="3.1.1.2"></circle>
<circle cx="200" cy="100" class="svg-triangle" xcoordinates="37618.0859375" ycoordinates="-4401.990234375" r="20" jobid="F5-0301" id="jobid_29126" ipaddress="4.1.1.2"></circle>
</svg>要选择jobid包含模式的所有圆,请使用:
[ATTR*=值]
表示属性名称为attr的元素,其值包含字符串中至少出现一次值.
这是演示,这次包含所需的圆圈jobid是第二个和第四个:
d3.selectAll("circle[id*='jobid_29']").style("fill", "lime")<script src="https://d3js.org/d3.v5.min.js"></script>
<svg>
<circle cx="50" cy="100" class="svg-triangle" xcoordinates="37618.0859375" ycoordinates="-4401.990234375" r="20" jobid="F5-0301" id="jobclass_29126" ipaddress="1.1.1.2"></circle>
<circle cx="100" cy="100" class="svg-triangle" xcoordinates="37618.0859375" ycoordinates="-4401.990234375" r="20" jobid="F5-0301" id="foojobid_29126" ipaddress="1.1.1.2"></circle>
<circle cx="150" cy="100" class="svg-triangle" xcoordinates="37618.0859375" ycoordinates="-4401.990234375" r="20" jobid="F5-0301" id="jobid_59126" ipaddress="3.1.1.2"></circle>
<circle cx="200" cy="100" class="svg-triangle" xcoordinates="37618.0859375" ycoordinates="-4401.990234375" r="20" jobid="F5-0301" id="jobid_29126" ipaddress="4.1.1.2"></circle>
</svg>PS:radiusSVG圈没有属性,r相反.