Question

我有

<text id="element.id.with.dots" x="10" xml:space="preserve" y="10" stroke="none">

如何使用d3.select选择它？这似乎不起作用，它返回null

var textElem = d3.select("text[id=element\\.id\\.with\\.dots]");

和此：

var textElem = d3.select("text[id=element.id.with.dots]");

在Firebug控制台窗口中给出错误：

SyntaxError: An invalid or illegal string was specified

Answer 1

使用带引号的字符串来界定属性的值：

var textElem = d3.select("text[id='element.id.with.dots']");

＆＃13;

var el = d3.select("text[id='element.id.with.dots']");
el.style({fill: 'red'})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg>
     <text id="element.id.with.dots" x="10" xml:space="preserve" y="10" stroke="none">Text/<text>
</svg>

＆＃13;

Answer 2

另一种解决方案是通过在其前面添加反斜杠\来逃避每个时段 - 然后您可以像往常一样使用d3.select()或d3.selectAll()。

您可以使用.replace(/\./g, '\\.')自动添加反斜杠。

请记住（谢谢，altocumulus！），如果您手动编辑id，则使用另一个反斜杠转义反斜杠本身。

d3.select("#element\\.id\\.with\\.dots")

D3当ID中有一个点时，如何通过ID选择元素

2 个答案: