How to select DOM elements with number value id using D3

Question

All:

I wonder how do I select a DIV element with id="1" in D3, I can do it in jQuery, but when I turn to D3, it gives error like:

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'div.chart#1' is not a valid selector

<div id="1"></div>

Thanks

Answer 1

The id TAG must start with letter, but you can use this:

d3.select('[id="1"]').append("div");

This is the example in JSFiddle

And here the technical explanation.

Answer 2

I had a situation when trying to select an element by id using d3 failed with the error:

Uncaught DOMException: Document.querySelector: 'obj_id' is not a valid selector.

My work around was to define a function

const d3Select = (id) => d3.select(document.getElementById(id))

an example of usage:

const dom = d3Select('obj_id')
   .attr('class','warning')

and it works just fine

Answer 3

If you gave it an ID, you can select it directly by ID. You don't need to specify div in the selector.

d3.select('#1')
.foo()