Question

我正在尝试根据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 article的选择方式，在我看来这应该可行...

Answer 1

由于评论的帮助，我发现问题是由于链接的ID在其中包含空格。但是，节点中也有空格，并且工作正常。

无论如何，我为以后遇到的任何人解决此问题的方法只是添加

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

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

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

1 个答案: