d3.selectは私がD3</p> <pre><code><div id="my~div_chart"> </code></pre> <p>の私のSVGコンテナを配置するために計画された場所d3.js.Assume次のdivを使用して簡単なチャートに取り組んでいます

Question

特殊文字での作業はありませんが、私は

を使用する場合

d3.select('#my~div_chart') 

私は特定のdivを選択することはできませんが、Javaスクリプトセレクタを使用することで、その作業ができます。

document.getElementById("my~div_chart"); 

私はこのことがなぜ起こっているのか誰にでも教えてもらえますか？それは特別な文字の問題であり、サポートされている特殊文字が何であるか教えてください。

Answer 1

それはspecificationsで、すぐそこです：CSSで

、（要素名、クラス、およびセレクタ内のIDを含む）の識別子がのみ文字を含めることができますが、[-ZA-Z0-9] ISO 10646文字U + 00A0以上、ハイフン（ - ）およびアンダースコア（_）。 2桁のハイフン、または1桁のハイフンで開始することはできません。識別子には、エスケープ文字とISO 10646文字を数値コードとして含めることもできます（次の項目を参照）。例えば、識別子「B & W？」は、 「B \ & W？」と書かれています。または「B¥26 W¥3F」と入力します。そのほかに（強調鉱山）

、~は兄弟コンビネータである：

一般兄弟結合子は、単純なの二つの配列を分離する「チルダ」（U + 007E、〜）文字で構成されていますセレクタ。 2つのシーケンスによって表される要素は、ドキュメントツリー内で同じ親を共有し、第1のシーケンスによって表される要素は、第2のシーケンスによって表される要素に先行する（必ずしも必ずしもそうでない）。

あなたはまだそのIDを使用したいのであれば、あなたは"#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>

最後に、あなたの質問に、あなたはdocument.getElementByIdと言いました働いた。ただし、document.querySelectorが失敗することに注意してください。