尽管存在具有 ID 的元素，但 D3.select ID 返回 null答案

【问题标题】：D3.select ID returning null despite existing element with ID尽管存在具有 ID 的元素，但 D3.select ID 返回 null
【发布时间】：2019-05-05 02:31:40
【问题描述】：

我正在尝试根据 ID 为力导向图中的各种元素进行选择。我可以根据他们的 ID 毫无问题地选择一个节点和它的标签，但是当我尝试选择一个链接时，它只会返回 null，就像这样 - (at *'s)

ut {_groups: Array(1), _parents: Array(1)}
_groups: Array(1)
0: Array(1)
****0: null****
length: 1
__proto__: Array(0)
length: 1
__proto__: Array(0)
_parents: [html]
__proto__: Object

但是，当我记录正在选择的 ID 并将其与检查器中的元素进行比较时，有些元素的 ID 与正在选择的元素完全匹配。例如，链接将d3.select("#P DataIns")，如果我检查P数据和Ins之间的链接，它会显示<line id="P DataIns"></line>

            var childNode = d3.select("#" + checkingNode.id);
            childNode.style("opacity", 1);
            childNode.style("stroke", highlight_color);

            var childLink = d3.select("#" + node2.id + checkingNode.id);
            childLink.style("opacity", 1);
            childLink.style("stroke", highlight_color);

            var childLabel = d3.select("#" + checkingNode.id + "label");
            childLabel.style("opacity", 1);
            childLabel.style("font-weight", "bold");

这是我用来选择的代码，只有选择子链接的中间代码不起作用。我在这个与其他两个不同的地方做错了什么会导致这种情况吗？所有 ID 仅使用字母或空格。作为参考，链接创建如下 -

link = link.data(config.links, d => d.id);
    link.exit().remove();
    link = link.enter().append("line")
            .attr("id", function (d) {
                return d.source + d.target;
            })
            .attr("class", "link")
            .attr("stroke-width", 2)
            .attr("stroke", "#888")
            .merge(link);

我已经查看了 Mike Bostocks article 以了解选择的工作原理，在我看来这应该可以工作...

【问题讨论】：

ID 不能包含空格字符！此外，您的选择器" #P DataIns" 将选择ID 为P 的元素的<DataIns> 类型的child 元素，这不是您想要的。您必须先修改您的 ID 才能获得您想要的结果。
节点的ID包含空格字符没有问题，它们的选择形成方式与没有问题的链接选择相同（例如选择节点P数据->d3.select("#P Data");I不过会尝试删除空格，谢谢！
仍然是错误的（请参阅引用 w3.org/TR/2008/REC-xml-20081126/#NT-Names 的 SVG 规范）。这些错误的 ID 是导致您出现问题的原因。 d3.select("#P DataIns") 匹配 <line id="P"><DataIns/></line>，而不是预期的 <line id="P DataIns">。
删除所有空格似乎已经修复了它，但我不明白它是如何对节点工作的，但对链接却没有......现在我对@987654335 有一个完全不同的问题@ 不更新 style="stroke:RGB" 而是更新 <line> 元素 stroke 属性导致没有变化......呃。

标签： javascript d3.js force-layout

【解决方案1】：

感谢 cmets 的帮助，我发现问题出在链接的 ID 中有空格。但是，节点中也有空格，并且工作正常。

不管怎样，我为以后遇到的人解决这个问题的方法是简单地添加

.replace(/\s/g, '')

从 JSON 数据中加载 ID 时，删除任何空白，并选择链接开始工作。

【讨论】：