Javascript 添加自定义<；g>；使用D3删除树中的节点

我不是前端开发人员。我试图在D3中构建一棵树，其中节点可能有一个自定义图标，该图标作为元素从数据中提交：

数据示例：（如果需要，我可以自由更改结构）

我怎样才能用如下内容替换

nodenter.append（“圆圈”）

            /// create the icon of the node from the data
            nodeEnter.append("g")
                .attr("something", function(d) {
                    if( d.ico != null) {
                        return d.ico
                    }
                    else{
                        return circle().style("fill", "#fff"); 
                    }
                })

我还可以强制每个节点都带一个“ico”属性，并将圆带到其中

谢谢

您可以使用。只需将

ico

成员更改为具有路径的path属性，而不是整个

。如果您有多条路径：

///  "ico": ["M28", "M34....",...]


/// create the icon of the node from the data
nodeEnter.each(fucntion(d) {

    const sel = d3.select(this);

    if( d.ico != null) {
        sel.append("g")
            .selectAll("path")
            .data(d.ico)
            .enter()
            .append("path")
            .attr("d", d);
    } else {
        sel.append("circle")
            .attr("r", 10);
    }
}

---

因为它是一个完整的组件，在里面我可以期待任何时候的形状。

---

我找到的唯一方法是编辑innerHtml属性并附加整个

这太完美了！我的“ico”是一个具有多条路径的“g”。我怎么办？谢谢已更新多个路径的答案。

            /// create the icon of the node from the data
            nodeEnter.append("g")
                .attr("something", function(d) {
                    if( d.ico != null) {
                        return d.ico
                    }
                    else{
                        return circle().style("fill", "#fff"); 
                    }
                })

///  "ico": ["M28", "M34....",...]


/// create the icon of the node from the data
nodeEnter.each(fucntion(d) {

    const sel = d3.select(this);

    if( d.ico != null) {
        sel.append("g")
            .selectAll("path")
            .data(d.ico)
            .enter()
            .append("path")
            .attr("d", d);
    } else {
        sel.append("circle")
            .attr("r", 10);
    }
}