时间戳

首页 > 解决方案 > 尽管存在具有 ID 的元素，但 D3.select ID 返回 null

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

问题描述

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

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关于选择如何工作的文章，在我看来这应该是可行的......

标签： javascriptd3.jsforce-layout

解决方案

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

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

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

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

推荐阅读