D3从节点隐藏.text元素答案

【问题标题】：D3 hide .text element from nodeD3从节点隐藏.text元素
【发布时间】：2021-01-20 12:28:56
【问题描述】：

我得到了一个带有某些节点的强制有向图。此外，我将图标附加为 .text，其中包含来自 fontawesome 的图标。我正在努力用 .on("click") 事件隐藏这些图标。我可以隐藏选定的节点，但图标仍然存在。有什么想法吗？

我尝试使用 .text("visibility", "hidden") 以及 ".style("font-size", "0px") 等。我可以更改 css 但我不想全部删除图标只是我选择的。

var icon = svg.selectAll("svg")
            .data(data_nodes)
            .enter()
                //.append("g")
                .append("text")
                .attr("id", "nodeTooltip")
                .attr("class", "icon")
                .attr("text-anchor", "middle")
                .attr("dominant-baseline", "central")
                .style("font-family","FontAwesome")
                .style("font-size","30px")
                .text(function (d) {return d.icon;})
                .call(d3.drag()
                    .on("start", dragStarted)
                    .on("drag", dragged)
                    .on("end", dragEnded)
                )
                 // disable browser context menu on icon
                .on("contextmenu", function (d, i){
                    d3.event.preventDefault()
                })
                .on("mouseenter", function(d) {
                    d3.event.preventDefault()
                })

function click(d) {
    if (boolOpacity == true) {
        nodes.filter((n) => {
            return n.parent == d.id
        }).style("visibility", "hidden")
        .text("visibility", "hidden")
        })
                boolOpacity = false
    } else {
        nodes.filter((n) => {
            return n.parent == d.id
        }).style("visibility", "visible")
        boolOpacity = true
    }

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

知道了！我怀疑我得到了“完美”的解决方案，但它正在工作。除了添加节点和相关的 JSON 文件之外，我还创建了一个自己的图标值，其中包含与节点相同的 JSON 数据。为了更好的参考等。

我只是忘记并过滤了。

nodes.filter((n) => {
            icons.filter((m) => {
                return m.parent == d.id
            }).style("visibility", "hidden")
            return  n.parent == d.id 
        }).style("visibility", "hidden")

【讨论】：