svg.selectAll("g")
    .data(root.descendants())
    .enter()
    .append("g")
    .attr("transform", function(d) {
        return "translate(" + d.y + "," + d.x + ")"
    })
    .append("circle")
    .attr("r", 7)
    .style("fill", "#69b3a2")
    .attr("stroke", "black")
    .style("stroke-width", 2)
    .append("text", function(d) {return d.name})
    .attr("style", "color:#eee;")

var g = svg.selectAll("g")
    .data(root.descendants())
    .enter()
    .append("g")
    .attr("transform", function(d) {
        return "translate(" + d.y + "," + d.x + ")"
    })
g.append("circle")
    .attr("r", 7)
    .style("fill", "#69b3a2")
    .attr("stroke", "black")
    .style("stroke-width", 2)
g.append("text", function(d) {
    console.log(d)
    return d.name
}).attr("style", "color:#eee;")

var svg = d3.select("#app-tree")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(40,0)");  // bit of margin on the left = 40

data = {
    name: 'Кухонный гарнитур',
    children: [
        {
            name: "параметры гарнитура",
            children: [
                {
                    name: "Вес гарнитура"
                }
            ]
        },
        {
            name: "Готовые сборки",
            children: [
                {
                    name: "Гарнитур 1"
                },
                {
                    name: "Гарнитур 2"
                }
            ]
        }
    ]
}

var cluster = d3.cluster()
    .size([height, width - 100]);

var root = d3.hierarchy(data, function(d) {
    return d.children;
});
cluster(root);


svg.selectAll('path')
    .data( root.descendants().slice(1) )
    .enter()
    .append('path')
    .attr("d", function(d) {
        return "M" + d.y + "," + d.x
            + "C" + (d.parent.y + 50) + "," + d.x
            + " " + (d.parent.y + 150) + "," + d.parent.x // 50 and 150 are coordinates of inflexion, play with it to change links shape
            + " " + d.parent.y + "," + d.parent.x;
    })
    .style("fill", 'none')
    .attr("stroke", '#ccc')


var g = svg.selectAll("g")
    .data(root.descendants())
    .enter()
    .append("g")
    .attr("transform", function(d) {
        return "translate(" + d.y + "," + d.x + ")"
    })
g.append("circle")
    .attr("r", 7)
    .style("fill", "#69b3a2")
    .attr("stroke", "black")
    .style("stroke-width", 2)
g.append("text").text(function(d) { return d.name; })