Question

我目前正在从事一项工作，要求我一次选择多个SVG元素。这些SVG元素中的每个元素都有一个id：“人” +范围从0到大约3000的某个数字。在某些时候，我想一次选择一系列SVG元素用于过渡动画。

我目前使用for循环来实现此功能，但是这似乎花费了太长时间，并且导致过渡动画滞后。

是否可以对ID在一定范围内的SVG项目执行selectAll？示例：person1-person3？

<div>
  <rect x="5" y="52" width="5" height="5" id="person0"></rect>
  <rect x="5" y="52" width="5" height="5" id="person1"></rect>
  <rect x="5" y="52" width="5" height="5" id="person2"></rect>
  <rect x="5" y="52" width="5" height="5" id="person3"></rect>
</div>

Answer 1

如果要避免for循环，请使用jQuery的slice()。

class _LoginFormState extends State<LoginForm> {
  String username, password;

  void ToogleState(typedata, text){
    setState(() {
      typedata = text;
    });
  }

  //Widget
  TextField(
    onChanged: (text){ToogleState(username, text); print(username);},
    decoration: InputDecoration(
      hintText: 'input username', labelText: 'Username'
    ),
  ),
}

为您提供第一个人-第三个人。

Answer 2

第一个逻辑选择是使用带有正则表达式的CSS属性选择器。但是，据我所知，CSS不支持选择器中的正则表达式。

因此，另一种选择是使用d3.range创建ID范围，例如...

d3.range(first ID value, last ID value + 1, 1).map(d=>"#person" + d).join(",")

...，您可以按照问题中的要求传递给selectAll：

是否可以对ID在一定范围内的SVG项目执行全选？

这是一个演示：

const start = 3;
const stop = 7;
d3.selectAll(d3.range(start, stop + 1, 1).map(d=>"#person" + d).join(","))
	.style("fill", "wheat")

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg>
  <rect x="5" y="10" width="10" height="50" id="person0"></rect>
  <rect x="25" y="10" width="10" height="50" id="person1"></rect>
  <rect x="45" y="10" width="10" height="50" id="person2"></rect>
  <rect x="65" y="10" width="10" height="50" id="person3"></rect>
  <rect x="85" y="10" width="10" height="50" id="person4"></rect>
  <rect x="105" y="10" width="10" height="50" id="person5"></rect>
  <rect x="125" y="10" width="10" height="50" id="person6"></rect>
  <rect x="145" y="10" width="10" height="50" id="person7"></rect>
  <rect x="165" y="10" width="10" height="50" id="person8"></rect>
  <rect x="185" y="10" width="10" height="50" id="person9"></rect>
</svg>

Answer 3

希望这对您有所帮助

var range = '2-6';//say
range = range.split('-')
for(var i=range[0];i<=range[1];i++)
{
  console.log($("#person"+i+"").attr('id'))

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<rect x="5" y="52" width="5" height="5" id="person0"></rect>
<rect x="5" y="52" width="5" height="5" id="person1"></rect>
<rect x="5" y="52" width="5" height="5" id="person2"></rect>
<rect x="5" y="52" width="5" height="5" id="person3"></rect>
<rect x="5" y="52" width="5" height="5" id="person4"></rect>
<rect x="5" y="52" width="5" height="5" id="person5"></rect>
<rect x="5" y="52" width="5" height="5" id="person6"></rect>

Answer 4

使用jQuery filter()和正则表达式

^person[1-3]$

^-一行的开头
person-从字面上匹配字符person（区分大小写）
- [1-3]-介于1到3之间

let $rect = $('rect')
              .filter(function() {
                return this.id.match(/^person[1-3]$/)
              })
              
console.log($rect.get())

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <rect x="5" y="52" width="5" height="5" id="person0"></rect>
  <rect x="5" y="52" width="5" height="5" id="person1"></rect>
  <rect x="5" y="52" width="5" height="5" id="person2"></rect>
  <rect x="5" y="52" width="5" height="5" id="person3"></rect>
  <rect x="5" y="52" width="5" height="5" id="person4"></rect>
  <rect x="5" y="52" width="5" height="5" id="person5"></rect>
</div>

选择编号在一定范围内的ID

4 个答案: