2016-12-23 34 views
6

özel karakter ile çalışmıyor Amad3.select Ben d3</p> <pre><code><div id="my~div_chart"> </code></pre> <p>benim svg kabı yerleştirmek için planlanan nerede d3.js.Assume aşağıdaki div kullanarak basit grafik üzerinde çalışıyorum

kullandığınızda
d3.select('#my~div_chart') 

Belirli bir div seçemiyorum, ancak java script selector'u kullanarak çalışıyorum.

document.getElementById("my~div_chart"); 

Herkes bunun neden böyle olduğunu önerebilir. Bu özel bir karakter sorunudur, desteklenen özel karakterlerin ne olduğunu söyleyin.

cevap

5

O specifications yılında, tam orada: BB'de

, (eleman isimleri, sınıflar ve kimlikleri dahil) tanımlayıcılar sadece karakter [a-zA-Z0-9] içerebilir ve ISO 10646 karakterleri U + 00A0 ve üstü ile artı tire (-) ve alt çizgi (_); bir rakam, iki tire ya da bir tire ve ardından bir rakam ile başlayamazlar. Tanımlayıcılar ayrıca, çıkış karakterlerini ve sayısal kod olarak herhangi bir ISO 10646 karakterini de içerebilir (sonraki öğeye bakın). Örneğin, "B & W?" Tanımlayıcısı "B \ & W \" olarak yazılabilir mi? veya "B \ 26 W \ 3F". (Vurgu benim) Bunun yanı sıra

, ~ kardeş combinator olup:

genel Kardeş combinator basit iki dizinin ayıran "tilde" (u + 007E, ~) karakteri yapılmıştır

seçiciler. İki sekans tarafından temsil edilen elemanlar, belge ağacındaki aynı ebeveyni paylaşırlar ve birinci sekans ile temsil edilen eleman, ikincisi tarafından temsil edilen elemanın (zorunlu olarak derhal değil) öncekidir. Hala o kimliğini kullanmak isterseniz

Yani, "#my\\~div_chart" kullanarak tilde kaçmak zorunda:

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>

Son olarak, söz konusu, bunu söyleyen document.getElementById çalıştı. Ancak, document.querySelector'un başarısız olacağını aklınızda bulundurun.