@antv/g-plugin-css-select

A G plugin for using CSS select syntax in query selector

Usage no npm install needed!

<script type="module">
  import antvGPluginCssSelect from 'https://cdn.skypack.dev/@antv/g-plugin-css-select';
</script>

README

@antv/g-plugin-css-select

Use CSS Selector when doing query in scene graph.

For example, if we construct a such scene:

solarSystem<Group>
   |    |
   |   sun<Circle name='sun' />
   |
 earthOrbit<Group>
   |    |
   |  earth<Circle>
   |
 moonOrbit<Group>
      |
     moon<Circle r='25' />

Then we can use these DOM API retrieving elements:

solarSystem.getElementsByName('sun');
// [sun]

solarSystem.getElementsByTagName('circle');
solarSystem.getElementsByTagName(SHAPE.Circle);
// [sun, earth, moon]

solarSystem.querySelector('[name=sun]');
// sun

solarSystem.querySelectorAll('[r=25]');
// [moon]