d3js / jQuery选择器不起作用

So I have this SVG, and I want to select all paths that have a certain attribute with a certain value. Specifically the attribute key is "NEN2580" and the value can be a number of things.

所以我有这个SVG,我想选择具有特定值的某个属性的所有路径。具体来说,属性键是“NEN2580”,值可以是很多东西。

So lets say we have a set of paths similar to:

所以我们假设我们有一组类似于的路径:

<path style="stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255); color: black; stroke-width: 0.25px; background-color: white;" d="M486.623,219.237 L486.375,217.624 L454.744,222.999 L454.972,224.497 L455.785,230.259 L456.344,235.117 L456.471,236.294 L457.993,236.122 L458.354,235.678 L459.039,236.234 L457.298,238.38 L462.863,242.894 L469.513,242.52 L469.228,237.441 L465.083,237.079 L465.16,236.2 L470.067,236.629 L470.395,242.471 L489.055,241.423 L488.64,236.886 L488.513,235.176 L488.369,233.611 L487.935,228.895 L487.716,226.954 L487.502,225.366 L486.623,219.237" guid="3e_Z0UB95FzQ84RHxlySDx" _id="3e_Z0UB95FzQ84RHxlySDx" type="IfcSpace" name="Cel" number="A1.01" ruimtefunctie="" toegankelijkheid="false" area="11.58914065878" NEN2580="Nuttige ruimte" ancestors="1EbDErTW54e9tQrrOBatzH,1EbDErTW54e9tQrrRq52Ux,1EbDErTW54e9tQrrRq52Uu,1EbDErTW54e9tQrrRq52Uw"></path>

I had this code which I was sure to work, but it doesn't:

我有这个代码,我肯定会工作,但它没有:

d3.selectAll("path[NEN2580='Nuttige ruimte']").style({fill: 'rgb(41, 128, 185)'});

Also changing it to the following does not work:

将其更改为以下内容也不起作用:

$("path[NEN2580='Nuttige ruimte']").css("fill", "rgb(41, 128, 185)");

Is it impossible to select for keys that end with numbers? Only thing I can come up with, but I could not find any constraints in css selector documentation for attribute keys that end with numbers.

是否无法选择以数字结尾的键?我只能提出,但在css选择器文档中找不到以数字结尾的属性键的任何约束。

Thanks in advance

提前致谢

3 个解决方案

#1

The attribute you're using NEN2580 is not a valid SVG attribute. To make it valid, you could define a custom XML namespace and reference that namespace in your <svg> tag. (The other attributes in your example have the same problem.) Because it's not valid, browsers aren't parsing it, so JavaScript can't select based on it.

您正在使用的属性NEN2580不是有效的SVG属性。要使其有效,您可以定义自定义XML命名空间并在

#2

Assuming you're doing this in html (rather than XML) the attribute needs to be lower case in the selector (html is not case sensitive)

假设您在html(而不是XML)中执行此操作,则选择器中的属性需要为小写(html不区分大小写)

$("path[nen2580='Nuttige ruimte']").css("fill", "rgb(41, 128, 185)");

#3

since the attributes of the SVG are dynamically generated from a noSQL database, which is populated through another service, the name of the attribute was in capitols, NEN2580. I changed the database to write the attribute in lower case, like nen2580, and that did the trick.

由于SVG的属性是从noSQL数据库动态生成的,该数据库是通过另一个服务填充的,因此该属性的名称为capitols,NEN2580。我更改了数据库以小写形式写了属性,比如nen2580,这就是诀窍。

Weird though that when it is in capitols, querying for lowercase does not work, but when it is in lower case as attribute, querying for capitols does not seem to matter.

奇怪的是,当它在capitols中时,查询小写不起作用,但是当它作为属性小写时,查询capitols似乎并不重要。

So:

What doesnt work:

什么不起作用:

svg:

<path NEN2580="Nuttige ruimte">

js:

$("path[NEN2580='Nuttige ruimte']").css("fill", "rgb(1,1,1)")
$("path[nen2580='Nuttige ruimte']").css("fill", "rgb(1,1,1)")

What works:

svg:

<path nen2580="Nuttige ruimte">

js:

$("path[NEN2580='Nuttige ruimte']").css("fill", "rgb(1,1,1)")
$("path[nen2580='Nuttige ruimte']").css("fill", "rgb(1,1,1)")