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

Question

我正在尝试 select 基于力导向图中各种元素的 ID。我能够 select 一个节点，它的标签基于他们的 ID 没有问题，但是当我尝试 select 一个 link 它只是 returns null 就像这样 - （在*'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

但是，当我记录正在 selected 的 ID 并将其与检查器中的元素进行比较时，有些元素与正在 selected 的 ID 完全匹配。例如，link 将 d3.select("#P DataIns") 如果我检查 P 数据和 Ins 之间的 link，它显示 <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");

这是我用于 selecting 的代码，只有 selecting 子 link 的中间代码不起作用。在这一个中我做错了什么与其他两个不同会导致这个吗？所有 ID 仅使用字母或空格。作为参考，link 的创建方式如下 -

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 了解 select 离子的工作原理，在我看来这应该有效...

Answer 1

感谢评论的帮助，我发现问题是由于链接的 ID 中包含 spaces。然而，节点也有 spaces，并且工作得很好。

无论如何，我为后来出现的任何人解决这个问题的方法是简单地添加

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

当从 JSON 数据加载 ID 时，删除任何白色 space，然后选择链接开始工作。

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

D3.select ID returning null despite existing element with ID

javascript

d3.js

force-layout