我的 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;
描边不透明度:1；
transform: scale(0.3);
to {
笔划宽度:0；
stroke-opacity: 0;
变换:比例(2)；
}
}
最佳答案
要选择 ipaddress 以 1.1 开头的所有圈子，请使用 “开头为” attribute selector :
[attr^=value]
Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.
这是使用您的结构的基本演示。有四个圆圈，然后我选择 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*=value]
Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.
这是演示，这次包含所需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:SVG 圆没有radius 属性，而是r。
关于css - 使用 D3 进行通配符选择，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51528799/