使用 D3 选择通配符答案

【问题标题】：wildcard selection using D3使用 D3 选择通配符
【发布时间】：2019-01-02 20:34:43
【问题描述】：

我的 DOM 中有以下结构

我需要选择所有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 {stroke-width: 0; stroke-opacity: 0; 变换：比例（2）； } }

【问题讨论】：

标签： css d3.js svg

【解决方案1】：

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

[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*=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。

【讨论】：