Question

我的DOM中具有以下结构

\ <圈子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-三角形脉冲”）}）;;

css：

.pulse {填充：白色； fill-opacity: 0;转换来源：50％50％； animation-duration: 2s;动画名称：pulse； animation-iteration-count: infinite; }

来自{的

@keyframes pulse { stroke-width: 3px;中风不透明度：1； transform: scale(0.3);

to {笔划宽度：0； stroke-opacity: 0;转换：scale（2）; } }

Answer 1

要选择所有ipaddress以1.1开头的圈子，请使用“以...开头的 attribute selector：

[attr ^ = value]

表示属性名称为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 * = value]

表示属性名称为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：SVG圈子没有属性radius，而是r。

使用D3进行通配符选择

1 个答案: