字符串与预期的模式不匹配 d3 选择答案

【问题标题】：String does not match expected pattern d3 select字符串与预期的模式不匹配 d3 选择
【发布时间】：2020-01-28 21:48:58
【问题描述】：

我正在使用 d3 v5 进行数据可视化，我创建了一个强制布局，每个节点都有自己的名称作为 id。这部分是动态完成的。 HTML 部分工作正常， userInput.value 将返回一个带有“/”的 id（在这种情况下，节点的 ID 是“foo/A”）。但是，D3.选择在其中选择id斜杠时选择id函数失败。有没有办法绕过这个错误而不重命名所有节点？

var userInput = document.getElementById("targetNode");
  var theNode = d3.select("#" + userInput.value);

【问题讨论】：

只需编写一个循环函数，从值中删除所有'/'。我认为绕过它的最简单方法。
那么可能有多个节点同名。
'/' 存在时是否有多个同名？
可能有 2 个不同的名称，例如 A/B 和 AB，两者的 id 相同。（我无法控制节点名称）
啊，我明白了。我不知道'/' 可能在这两个词之间。它显示什么错误？

标签： javascript html css d3.js

【解决方案1】：

您必须使用\\ 转义/。所以做这样的事情不应该返回错误：

var userInput = document.getElementById("targetNode");
var temp = userInput.value;
var temp2 = temp.replace('/','\\/')
var theNode = d3.select("#" + temp2);

【讨论】：

工作，谢谢。需要转义每个字符，因为我学会了 javascript 只替换了第一次出现，我编辑了你的代码到这个var temp2 = temp.replace(/[/]/g, "\\/");
很好，很高兴我能帮上忙。你介意给我一个赞成票吗？我也会这样做
是的，对不起。忘记了