D3.js如何选择类名含"global_read"的元素？类似jQuery选择器

没问题，我来帮你搞定这个选择器的问题～你遇到的报错是因为用了不符合CSS规范的选择器语法，D3的selectAll底层依赖浏览器原生的querySelectorAll，所以得严格遵循标准CSS选择器的写法。

错误原因分析 #

你写的g.selectAll("g [class=*global_read]")有两个明显的语法问题：

• 属性包含匹配的运算符顺序错了：应该是*=（表示包含），而不是=*
• 属性值必须用引号包裹，不管是单引号还是双引号

正确的写法 #

要选择类名包含global_read子串的元素，标准的CSS属性包含选择器格式是[class*="global_read"]，对应到D3里的写法分两种场景：

• 如果是要选择当前g元素下所有后代中类名包含global_read的元素：

  g.selectAll('[class*="global_read"]')
  

• 如果是要选择当前g元素下后代中的g元素且类名包含global_read：

  g.selectAll('g[class*="global_read"]')
  

额外补充 #

D3完全支持所有标准CSS选择器，除了包含匹配*=，你还可以用：

• [class^="global_read"]：匹配类名以global_read开头的元素
• [class$="global_read"]：匹配类名以global_read结尾的元素
  这些和jQuery里对应的属性选择器功能是一致的，只要严格遵循CSS语法就不会出错啦。

内容的提问来源于stack exchange，提问作者Inkane