在 D3 力有向图中选择性地删除节点标签

Question

总体背景：我在 wiki 空间中的页面之间有一个交叉引用数据库，并且希望链接的可视化逐渐增长。

我有工作代码，可以在鼠标悬停时显示标签集群。但是当你离开时，我不想隐藏所有标签，我想保留某些关键标签（例如集群的中心）。

我分叉了一个现有的示例，并使其大致工作。

• 信息位于http://webseitz.fluxent.com/wiki/WikiGraphBrowser
• 在该页面或该空间中任何其他页面的底部附近，在以“BackLinks：”开头的块中，最后您会找到“单击此处查看 WikiGraphBrowser”，它将启动一个带有界面的窗口李>
• 在http://www.wikigraph.net/static/d3/cgmartin/WikiGraphBrowser/ 可见的等效静态子集示例：

• 该示例的代码位于https://github.com/BillSeitz/WikiGraphBrowser/blob/master/js/wiki_graph.js

删除所有标签的代码：

i = j = 0;
if (!bo) { //bo=False - from mouseout
    //labels.select('text.label').remove();
        labels.filter(function(o) {
        return !(o.name in clicked_names);
        })
        .text(function(o) { return ""; });
        j++;
}

代码试图留下一些标签，这不起作用：

labels.forEach(function(o) {
    if (!(d.name in clicked_names)) {
        d.text.label.remove();
    }

我知道我根本不了解 d3 模型.... 谢谢

Answer 1

问题归结为您使用in 在数组中搜索名称。 Javascript in 关键字搜索对象键而不是对象值。对于数组，键是索引值。所以测试(d.name in clicked_names) 总是会返回false。

试试

i = j = 0;
    if (!bo) { //bo=False - from mouseout
        //labels.select('text.label').remove();
         labels.filter(function(o) {
            return (clicked_names.indexOf(o.name) < 0);
            })
            .text(function(o) { return ""; });
            j++;

    }

array .indexOf(object) 方法如果数组中没有任何元素与参数相等（按照三等式标准），则返回 -1。或者，如果您尝试支持 IE8（我假设不是，因为您使用的是 SVG），您可以使用 .some(function) 测试。

顺便说一句，删除标签和将其文本内容设置为空字符串是有区别的。使用哪一个取决于您以后是否要再次显示文本。无论哪种方式，只要确保您的浏览器不会出现大量空标签堵塞您的浏览器。