d3.select不使用特殊字符

Question

我正在使用d3.js.Assume在简单的图表上工作,我计划放置我的svg容器d3

<div id="my~div_chart">

但是当我使用时

d3.select('#my~div_chart')

我无法选择特定的div,但是通过使用java脚本选择器,它的工作原理.

document.getElementById("my~div_chart");

任何人都可以建议我为什么会这样.如果这是一个特殊的字符问题,请告诉我支持的特殊字符是什么.

Answer 1

它就在那里,在规格中:

在CSS中,标识符(包括元素名,类和在选择器的ID)可以包含仅字符[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会失败.