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

它正好在specifications：

  

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

除此之外，~是兄弟组合者：

  

一般兄弟组合器由＆＃34; tilde＆＃34; （U + 007E，〜）分隔两个简单选择器序列的字符。由两个序列表示的元素在文档树中共享相同的父元素，由第一个序列表示的元素在第二个序列表示的元素之前（不一定是立即）。

因此，如果您仍想使用该ID，则必须使用"#my\\~div_chart"转义代字号：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

最后，在你的问题中，你说document.getElementById有效。但是，请记住document.querySelector会失败。