d3.select nie działa ze znaków specjalnych

Question

Pracuję nad prostego wykresu za pomocą d3.js.Assume następujące div gdzie planuje się umieścić moje svg pojemnik d3

<div id="my~div_chart"> 

Ale gdy używam

d3.select('#my~div_chart') 

Nie mogę wybrać konkretnego elementu div, jednak za pomocą selektora skryptu java, jego działanie.

document.getElementById("my~div_chart"); 

Czy ktoś może zasugerować mi, dlaczego tak się dzieje.

Answer 1

To właśnie tam, w specifications:

w CSS, identyfikatory (w tym nazwy elementów, klasy i identyfikatory w selektorach) mogą zawierać tylko znaki [a-zA-Z0-9] oraz ISO 10646 znaków U + 00A0 i wyższych plus myślnik (-) i podkreślenie (_); nie mogą zaczynać się od cyfry, dwóch łączników ani łącznika, po którym następuje cyfra. Identyfikatory mogą również zawierać znaki ze znakiem ewakuacji i dowolny znak ISO 10646 jako kod liczbowy (patrz następny element). Na przykład identyfikator "B & W?" może być zapisany jako "B \ & W \?" lub "B \ 26 W \ 3F". (Kopalnia nacisk)

Poza tym ~ jest syntezatora rodzeństwa:

ogólnego rodzeństwa syntezatora jest wykonana z „tyldy” (U + 007E, ~) znaków, który oddziela dwie sekwencje prostych selektory. Elementy reprezentowane przez dwie sekwencje mają tego samego rodzica w drzewie dokumentu, a element reprezentowany przez pierwszą sekwencję poprzedza (niekoniecznie natychmiast) element reprezentowany przez drugą sekwencję.

Tak więc, jeśli nadal chcesz używać tego identyfikatora, trzeba uciec tyldy, używając "#my\\~div_chart":

d3.select("#my\\~div_chart").on("click", function(){ 
 
    d3.select(this).style("background-color","teal") 
 
});

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<div id="my~div_chart">Click Me</div>

Wreszcie w swoim pytaniu, powiedział pan, że document.getElementById pracował. Pamiętaj jednak, że document.querySelector może zawieść.