d3.select 不适用于特殊字符

我正在使用 d3.js 处理简单的图表。假设下面的 div 是我计划放置 d3 的 svg 容器的地方

<div id="my~div_chart">

但是当我使用

d3.select('#my~div_chart')

我无法选择特定的 div，但是通过使用 java 脚本选择器，它可以工作。

document.getElementById("my~div_chart");

谁能告诉我为什么会发生这种情况。如果是特殊字符问题，请告诉我支持哪些特殊字符。

它就在那里，在规格 https://www.w3.org/TR/CSS21/syndata.html#characters:

在 CSS 中，标识符（包括元素名称、类和选择器中的 ID）可以包含only字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高版本，加上连字符 (-) 和下划线 (_)；它们不能以数字、两个连字符或连字符后跟数字开头。标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码（请参阅下一项）。例如，标识符“B&W？”可以写成“B\&W\?”或“B\26 W\3F”。 （强调我的）

除此之外，~是一个兄弟组合器：

一般同级组合器由分隔两个简单选择器序列的“波形符”（U+007E，~）字符组成。两个序列表示的元素在文档树中共享相同的父元素，并且第一个序列表示的元素在第二个序列表示的元素之前（不一定紧邻）。

因此，如果您仍然想使用该 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会失败的。