добавление пользовательских <g>к узлам в дереве с помощью D3

Question

Я не фронтенд-разработчик.Я пытаюсь построить дерево в D3, где узлы могут иметь пользовательский значок, исходящий из данных как элемента:

Пример данных: (У меня есть свобода изменения структуры при необходимости)

            {
                "name": "Top Level",
                "parent": "null",
                "children": [
                    {
                        "name": "Level 2: A",
                        "parent": "Top Level",
                        "ico": "<g> <path d=\"M28...> <path d="" >...</path><\/g>"
                        "children": [

и мой код выглядит следующим образом: (следующий http://www.d3noob.org/2014/01/tree-diagrams-in-d3js_11.html)

            // Compute the new tree layout.
            var nodes = tree.nodes(root).reverse(),
                links = tree.links(nodes);

            // Normalize for fixed-depth.
            nodes.forEach(function (d) { d.y = d.depth * 180; });

            // Declare the nodes
            var node = svg.selectAll("g.node")
                .data(nodes, function (d) { return d.id || (d.id = ++i); });

            // Enter the nodes.
            var nodeEnter = node.enter().append("g")
                .attr("class", "node")
                .attr("transform", function (d) {
                    return "translate(" + d.y + "," + d.x + ")";
                });

            nodeEnter.append("circle")
                .attr("r", 10)
                .style("fill", "#fff");

Как я могу заменить nodeEnter.append("circle") чем-то вроде следующего?

            /// 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" и ввести туда круг

Спасибо!

Answer 1

, потому что это целый компонент, внутри я могу ожидать любое время форм.Единственный способ сделать это - отредактировать свойство innerHtml и прикрепить все

Answer 2

вы можете использовать selection.each (функция) .Просто измените элемент ico, чтобы он указывал атрибут пути вместо целого <g>.Если у вас несколько путей:

///  "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);
    }
}